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.

 

2 Comments

  1. Delbert Lappin June 21, 2011 at 9:37 pm

    excellent blog I enjoyed

     
  2. Free Xbox Live March 24, 2012 at 9:20 pm

    WOW just what I was looking for. Came here by searching for scrollable

     

Leave a Reply

Your email address will not be published. Required fields are marked *

 

 

 

Theme by HermesThemes

Copyright © 2018 CoderzHeaven. All Rights Reserved

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.