ListView Children

app.js

var win = Ti.UI.createWindow({backgroundColor: 'white'});

var search = Titanium.UI.createSearchBar({
    barColor:'#000', 
    showCancel:true,
    height:43,
    top:0,
});

search.addEventListener('cancel', function(){
    search.blur();
});

var plainTemplate = {
    properties:{
		backgroundColor:"white",
		height:100
	},
    childTemplates: [
    	{
    		type:'Ti.UI.View',
    		bindId:'main',
    		properties:{
    			left:0,
    			right:0,
    			top:0,
    			bottom:0
    		},
    		events:{click:animateImage},
    		childTemplates:[
		        {
		            type: 'Ti.UI.Label', // Use a label
		            bindId: 'rowtitle',  // Bind ID for this label
		            properties: {        // Sets the Label.left property
		                left: '10',
		                text:"Distribution Check",
		                top:5
		              	
		            }
		        },
		        {
		            type: 'Ti.UI.Label', // Use a label
		            bindId: 'rowtitle',  // Bind ID for this label
		            properties: {        // Sets the Label.left property
		                left: '10',
		                top:30,
		                color:"gray"
		              	
		            }
		        },
		        {
		            type: 'Ti.UI.Label', // Use a label
		            bindId: 'rowdetail',  // Bind ID for this label
		            properties: {        // Sets the Label.left property
		                left: '10',
		                top:55,
		                text:"Row Details",
		                color:"gray"
		              	
		            }
		        },
		        {
		            type: 'Ti.UI.Label', // Use a label
		            bindId: 'warning',  // Bind ID for this label
		            properties: {        // Sets the Label.left property
		                left: '10',
		                top:80,
		                text:"Due in less then 24 hours",
		                color:"orange"
		              	
		            }
		        },
		        {
		            type: 'Ti.UI.ImageView',  // Use an image view
		            bindId: 'pic',            // Bind ID for this image view
		            properties: {             // Sets the ImageView.image property
		            	image: 'KS_nav_ui.png'
		            }
		        },                    
		        {
		            type: 'Ti.UI.Button',   // Use a button
		            bindId: 'myButtonID2',       // Bind ID for this button
		            properties: {           // Sets several button properties
		                width: '80',
		                height: '30',                        	
		                right: '10',
		                title: 'press me'
		            },
		            //events: { click : report }  // Binds a callback to the button's click event
		        }
    	]
    }]
};

var secondTemplate = {
	properties:{
		backgroundColor:"gray",
		height:100
	},
    childTemplates: [
    	{	type: 'Ti.UI.View',
    		properties:{
    			height:80,
    			width:Ti.UI.FILL
    		},
    		//events:{touchstart:report},
    		childTemplates: [
		        {
		            type: 'Ti.UI.Label', // Use a label
		            bindId: 'rowtitle',  // Bind ID for this label
		            properties: {        // Sets the Label.left property
		                left: '10',
		                font:{fontWeight:"bold"},
		                title:"Deal Sheet Local"
		            }
		        },
		                        
		        {
		            type: 'Ti.UI.Label',   // Use a button
		            bindId: 'myButtonID2',       // Bind ID for this button
		            properties: {           // Sets several button properties
		                width: '80',
		                height: '30',                        	
		                right: '10',
		                text: 'Report',
		                textAlign:"center"
		            },
		            //events: { click : report }  // Binds a callback to the button's click event
		        }
		   ]}
    ]
};
var y = 0;
var direction = null;

var listView = Ti.UI.createListView({
	top:20,
	searchView: search, 
	caseInsensitiveSearch: true,
    // Maps the plainTemplate object to the 'plain' style name
    templates: { 'plain': plainTemplate, second:secondTemplate },
    // Use the plain template, that is, the plainTemplate object defined earlier
    // for all data list items in this list view
    defaultItemTemplate: 'second'               
});


var data = [];
for (var i = 0; i < 100; i++) {
    data.push({
        // Maps to the rowtitle component in the template
        // Sets the text property of the Label component
        rowtitle : { text: 'Deal Sheet Local ' + (i + 1) },
        // Sets the regular list data properties
        myButtonID2 : {
        	
        	visible:i==6?false:true
        },
        properties : {
            itemId: 'row' + (i + 1),
            accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
            searchableText:'Row ' + (i + 1)
        },
        template:isEven(i)?"second":"plain"
    });
}
var sections = [];

for(var i = 0, l = 9; i<l; i++){
	var headerView = Ti.UI.createView({
		height:40,
		backgroundColor:"black",
	});
	
	var titleLabel = Ti.UI.createLabel({
	 	left:20,
		color:"white",
		text:"Title",
		textAlign:"left"
	});
	headerView.add(titleLabel);
	
	var timeTitle = Ti.UI.createLabel({
		color:"gray",
		text:"1(00:05)",
		textAlign:"right",
		right:20
	});
	headerView.add(timeTitle);
	
	sections.push(Ti.UI.createListSection({headerView:headerView, items: data.slice(i,i+10)}));
}

listView.sections = sections;

win.add(listView);
win.open();
function animateImage(evt){
	
	evt.source.children && Ti.API.info('@@@evt: ' + JSON.stringify(evt.source.children));
	evt.source.children[4].animate({
		transform: Ti.UI.create2DMatrix({ rotate: 180 }),
		duration: 500,
		repeat: -1,
		autoreverse:true
	});
}

function report(evt) {
	Ti.API.info(JSON.stringify(evt));
	var alertItem = Ti.UI.createAlertDialog({
		title:"Change",
		buttonNames:["Yes","No"]
	});
	alertItem.show();
	
	alertItem.addEventListener("click", function(e){
		if(e.index == 0){
			
			listView.sections[evt.sectionIndex].updateItemAt(evt.itemIndex,{
        		rowtitle : { 
        			text: 'CHANGE' + (i + 1) 
        		}
       		});
		} else {
			
		}
	});
}

function isEven(n) 
{
   return isNumber(n) && (n % 2 == 0);
}

function isOdd(n)
{
   return isNumber(n) && (Math.abs(n) % 2 == 1);
}

function isNumber(n)
{
   return n === parseFloat(n);
}