ListView Template

app.js

/*
If you want to design a custom row in a listView. And each row as like as your mind in this case template is very 
effective.

*/

//test case

var win = Ti.UI.createWindow({
	title : 'Multiple Templates',
	backgroundColor : '#000'
});

//Template One contains a click events and a label

var template1 = {
	properties : {
		height : 60
	},
	childTemplates : [{
		type : 'Ti.UI.Label',
		bindId : 'info',
		properties : {
			color : 'red',
			highlightedColor : 'white',
			font : {
				fontFamily : 'italic',
				fontSize : 20,
				fontWeight : 'bold'
			},
			width : 60,
			height : Ti.UI.FILL,
			left : 5

		},
		events : {
			click : name
		},
	}, {
		type : 'Ti.UI.ImageView', // Use an image view for the image
		bindId : 'pic', // Maps to a custom pic property of the item data
		properties : {// Sets the image view  properties
			width : '50dp',
			height : '50dp'
		},
		events : {
			click : name
		}
	}, {
		type : 'Ti.UI.Label',
		bindId : 'es_info',
		properties : {
			color : 'red',
			highlightedColor : 'white',
			font : {
				fontFamily : 'italic',
				fontSize : 20,
				fontWeight : 'bold'
			},
			width : 60,
			height : Ti.UI.FILL,
			right : 5

		},
		events : {
			click : name
		},
	}]
};

var template2 = {
	properties : {
		height : 60
	},
	childTemplates : [{
		type : 'Ti.UI.ImageView', // Use an image view for the image
		bindId : 'pic1', // Maps to a custom pic property of the item data
		properties : {// Sets the image view  properties
			width : '50dp',
			height : '50dp',
			left : 5
		},
		events : {
			click : name
		},
	}, {
		type : 'Ti.UI.Label', // Use a label for the subtitle
		bindId : 'info', // Maps to a custom es_info property of the item data
		properties : {// Sets the label properties
			color : 'gray',
			font : {
				fontFamily : 'Arial',
				fontSize : '20dp'
			},
		},
		events : {
			click : name
		},
	}, {
		type : 'Ti.UI.ImageView', // Use an image view for the image
		bindId : 'pic2', // Maps to a custom pic property of the item data
		properties : {// Sets the image view  properties
			width : '50dp',
			height : '50dp',
			right : 5
		},
		events : {
			click : name
		},
	}]
};

//Here Declared  section and a listView

var sections = [];

var design1 = Ti.UI.createListSection({
	headerTitle : 'First design'
});
var design1Data = [];

for (var i = 0; i < 4; i++) {
	design1Data.push({
		template : 'first',
		info : {
			text : 'APPC'
		},
		pic : {
			image : 'KS_nav_ui.png'
		},
		es_info : {
			text : "UTC"
		}
	});
}

design1.setItems(design1Data);
sections.push(design1);

var design2 = Ti.UI.createListSection({
	headerTitle : 'second design'
});

var design2Data = [];

for (var i = 0; i < 4; i++) {
	design2Data.push({
		template : 'second',
		pic1 : {
			image : 'KS_nav_ui.png'
		},
		info : {
			text : 'UTC'
		},
		pic2 : {
			image : 'KS_nav_ui.png'
		}
	});
}

design2.setItems(design2Data);
sections.push(design2);

var listView = Ti.UI.createListView({
	templates : {
		'first' : template1,
		'second' : template2
	},
	defaultItemTemplate : 'first',
	top : 20
});
listView.setSections(sections);

function name(e) {

	// var item = e.section.getItemAt(e.itemIndex);
	// alert(item.info.text);
	alert('click event')

}

win.add(listView);

win.open();