titanium开发教程0404创建自定义的table rows

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

var win = Titanium.UI.createWindow({  
    title:"Specials",
    backgroundColor:"#FFFFFF",
    //navBarHidden:true, //Hide the nav bar for the window
    tabBarHidden:true //Hide the tab bar for the window
});
//Remember, we are hiding this tab through the property tabBarHidden above
var tab = Titanium.UI.createTab({  
    icon:"KS_nav_views.png",
    title:"Specials",
    window:win
});

//Method for custom table row creation
//1. Store all the data we need in an array of objects
//2. Traverse the array in a for loop and make TableViewRows out of views
//3. Store the created TableViewRows in a new array
//4. Set the new array as the data source for our TableView

//1. Store all the data we need in an array of objects
var data = [
	{img:"images/spa.png",title:"Day Spa Package",amount:250},
	{img:"images/desert-sea.png", title:"2 Day Salton Sea", amount:350},
	{img:"images/backpack.png", title: "Big Sur Retreat", amount:620}	
]

var rowData = []; //An array that will hold our row objects created by createTableViewRow

//2. Traverse the array in a for loop and make TableViewRows out of views
for(var i = 0; i < data.length; i++){
	
	//Create rows to insert in the table row
	var img = Titanium.UI.createImageView({
		image:data[i].img,//The img property of the data array
		height:180,
		320
	});
	
	var bgBar = Titanium.UI.createView({
		height:36,
		"100%",
		bottom:0,
		left:0,
		backgroundColor:"#000",
		opacity:0.6
	})
	
	var title = Titanium.UI.createLabel({
		text:data[i].title,//The title property of the data array
		height:36,
		"75%", //Ideally the screen width
		bottom:0,
		left:0,
		color:"#FFFFFF",
		textAlign:"left"
	});

	var amount = Titanium.UI.createLabel({
		text:"$" + data[i].amount,//The amount property of the data array
		height:36,
		"25%",
		bottom:0,
		right:0,
		color:"#FFFFFF",
		textAlign:"right"
	});
	
	//Create the row
	var row = Titanium.UI.createTableViewRow({
		height:"auto"//Set the height of the row to auto so that it expands freely in the vertical direction
	});
	
	//Add the views to the row
	row.add(img);
	row.add(bgBar);
	row.add(title);
	row.add(amount);
	
	//Two methods for adding listeners
	//1. Add listeners internally to the views added to the row
	//2. Add a listener to the table and use the e.source property to figure out what event fired the event
	/*
	img.addEventListener("click", function(e){
		alert("You tapped the image");
	});
	
	bgBar.addEventListener("click",function(e){
		alert("You tapped the view behind the text");
	});
	*/
	//3. Store the created TableViewRows in a new array
	//push the row into the array
	rowData.push(row);
}

//More complex table will use rows created with createTableViewRow
var tableView = Titanium.UI.createTableView({
	//4. Set the new array as the data source for our TableView
	data:rowData
});

tableView.addEventListener("click", function(e){
	//2. Add a listener to the table and use the e.source property to figure out what event fired the event
	alert(e.source);
});

win.add(tableView);

tabGroup.addTab(tab);  

// open tab group
tabGroup.open();