ListView with multiple templates and events

app.js

// ListView with Multiple template and events

//Hi, I have created four custom template and event. 
//And add data in a section whose property is coming from custom template.
//And event fire in each template. 
	var win = Ti.UI.createWindow({
		title:'Multiple Templates',
		backgroundColor:'#000'
	});
	
	//Template One contains a click events and a label
	
	var template1 = {
  		properties: {height: 60},
  		events: {click: function(e) {
        var section = e.section; 
    	var data = section.getItemAt(e.itemIndex);
    	alert(data.info.text);
      }},
  		
	  	childTemplates: [
  		{
    		type: 'Ti.UI.Label',
    		bindId:'info',
    		properties: {
      			color: 'red',
      			highlightedColor:'white',
      			font: { fontFamily:'italic', fontSize:20, fontWeight:'bold'},
      			width: Ti.UI.FILL, height: Ti.UI.FILL,
      		
    		}
  		}
  	]};
  	
  	
  	//template 2 contains a ImageView and a label and a click Event
  	var template2 = {
  		properties: {height: 60},
  		 events: {click: function(e) {
        var section = e.section; 
    	var data = section.getItemAt(e.itemIndex);
    	alert(data.info.text);
      }},
	  	childTemplates: [
  		{
    		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', right: 10
            }
  		},
  				
  		{                            
            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' },
                left: '10dp', top: '25dp',
            }
       },
     		
  	]};
  	
  	
  	//Templete3 contains a Textfields
  	
  		var template3 = {
  		properties: {height: 60},
  		 events: {click: function(e) {
       
    	var item = e.section.getItemAt(e.itemIndex);
    	alert('data='+item);
      }},
  		
	  	childTemplates: [
  		{
    		 type: 'Ti.UI.TextField',     // Use a label for the subtitle
            bindId: 'bindField',       // Maps to a custom es_info property of the item data
            properties: {            // Sets the label properties
                color: '#000',
                font: { fontFamily:'Arial', fontSize: '20dp' },
                left: '5dp', right: '5dp',height:60,value:''
            },
  		}
  	]};
  	
  	
  	//Template4 contains a ImageView and a Label and a click Event
  	
  	var template4 = {
  		properties: {height: 60},
  		 events: {click: function(e) {
        var section = e.section; 
    	var data = section.getItemAt(e.itemIndex);
    	alert(data.info.text);
      }},
	  	childTemplates: [
  		{
    		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', left: 0
            }
  		},
  		
  		{                            // Subtitle
            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' },
                left: '60dp', top: '25dp',
            }
        }
  	]};
  	
  //Here Declared  section and a listView 	
  		
  	var section = Ti.UI.createListSection({});
	var listView = Ti.UI.createListView({
  		templates: { 'tempLabel': template1 ,
  		'rightImage':template2,
  		'tempTextField':template3,
  		'leftImage':template4
  		},
  		sections: [ section ]
	});

//Input data set here
	
    var data = [
    {template:'tempLabel', info:{text:'My every things is coming from the template1'}},
    {template:'rightImage', properties:{height:100},pic: {image: 'bangla.png'},info:{text:'This is custom Templete 2'}},
    {template:'tempTextField', properties:{height:120}},
    {template:'leftImage', properties:{height:120},pic: {image: 'bangla.png'},info:{text:'This is custom Templete 4'}},
   	
    ];
    
    section.setItems(data);
    
	win.add(listView);
	
	win.open();