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.
excellent blog I enjoyed
WOW just what I was looking for. Came here by searching for scrollable