Skip to content

Instantly share code, notes, and snippets.

@MotiurRahman
Last active December 28, 2015 00:59
Show Gist options
  • Save MotiurRahman/7417167 to your computer and use it in GitHub Desktop.
Save MotiurRahman/7417167 to your computer and use it in GitHub Desktop.
ListView with multiple templates and events
// 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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment