CoderzHeaven

Hi all……..
This tutorial is for Titanium users. This tutorial explains how to place a textBox or anyother control inside a tableView.
A tableview requires data in the form of a array, so we create an array (here array is named “data_array“) by adding the controls like textboxes and labels inside it. You can give a large number of properties to customize the controls. i have given some of them.

                var data_array= [];  // This is the array that we are going to give to the tableView.

                /* creating a textField to place in the tableView */
                var name_tf = Titanium.UI.createTextField({
			color:'#336699',
			hintText: 'Enter Name',
			height:45,
			value: "",
			left:100,right:10,
			textAlign:'right',
			autocorrect:false,
			scrollable:false,
			clearButtonMode:Titanium.UI.INPUT_BUTTONMODE_ONFOCUS,
			borderStyle:Titanium.UI.INPUT_BORDERSTYLE_NONE
		});

               var place_tf = Titanium.UI.createTextField({
			color:'#336699',
			hintText: 'Enter place',
			height:45,
			value: "",
			left:100,right:10,
			textAlign:'right',
			autocorrect:false,
			scrollable:false,
			clearButtonMode:Titanium.UI.INPUT_BUTTONMODE_ONFOCUS,
			borderStyle:Titanium.UI.INPUT_BORDERSTYLE_NONE
		});

              function addFirstRow()
		{
			var row = Ti.UI.createTableViewRow({height:45});
			row.backgroundColor = '#ffffff';
			row.selectedBackgroundColor = '#ffffff';

                        /* creating a label to place in the tableView */
			var label = Titanium.UI.createLabel({
					color:'#000', height:45,left:10,text:'App Name', width:280,
					font:{fontSize:18,fontFamily:'Arial', fontWeight:'bold'}
			});

			row.add(label);
			row.add(name_tf );
			row.selectionStyle = Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
			row.className = 'control';
			data_array[0] = row;
		}

               function addSecondRow()
		{
			var row = Ti.UI.createTableViewRow({height:45});
			row.backgroundColor = '#ffffff';
			row.selectedBackgroundColor = '#ffffff';

			var label = Titanium.UI.createLabel({
					color:'#000', height:45,left:10,text:'App Name', width:280,
					font:{fontSize:18,fontFamily:'Arial', fontWeight:'bold'}
			});

			row.add(label);
			row.add(place_tf );
			row.selectionStyle = Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
			row.className = 'control';
			data_array[1] = row;
		}

                addFirstRow();    /* calling the above functions */
                addSecondRow();

              /* Creating a tableView and placing the TextBox and Label inside it
                  here data is the property for which we have to provide the data-source */

               var tableview = Titanium.UI.createTableView({
			data:data_array,
			height:260,
			width:320,
			backgroundColor:'transparent',
			scrollable:'false',
			style:Titanium.UI.iPhone.TableViewStyle.GROUPED,
			top:25
		});

Now you have created a tableView with 2 controls in each row.
Make sure to add this to your window to view it.
Please leave your comments if this post was useful.