Sencha itemTpl examples

gistfile1.txt

itemTpl:[
  "<div>",
		"<div style='font-weight:bold;' class='list-item-title'>{FIRST_NAME} {LAST_NAME} </div>",
		"<div class='list-item-narrative'>{EMAIL}</div>",
		"<div class='list-item-narrative'>{PHONE}</div>",
		"<div style='font-style:italic;' class='list-item-narrative'>",
                      "<tpl if='ACTIVE == 1'>",
                           "Active: True",
                      "</tpl>",
                "</div>",
	"</div>"
],

itemTpl: new Ext.XTemplate(
           '<div style="font-size: 1.3em;">'+
                '{FIRST_NAME} '+  
                '<tpl if="MIDDLE_INITIAL !== null">'+
                    '{MIDDLE_INITIAL} '+
                '</tpl>'+
                '{LAST_NAME} '+
                '<tpl if="SUFFIX !== null">'+
                    '{SUFFIX} '+
                '</tpl>'+
            '<div>'
        ),​

itemTpl: new Ext.XTemplate(
  		'<table style="margin-bottom: 0em;">',
				'<tr>',
					'<td style="text-align:left;width:50%;font-weight:bold;">{CLASS_NAME}</td>',
					'<td style="text-align:right;width:50%;font-weight:bold;">{CLASS_DESCRIPTION}</td>',
				'</tr>',
				'<tr>',
					'<tpl if="this.findInstructor(values.CLASS_ID).length == 0">',
						'<td style="text-align:left;width:50%;"> </td>',
					'</tpl>',
					'<tpl if="this.findInstructor(values.CLASS_ID).length &gt; 1">',
						'<td style="text-align:left;width:50%;">Instructors:{[this.findInstructor(values.CLASS_ID)]}</td>',
					'</tpl>',
					'<tpl if="this.findInstructor(values.CLASS_ID).length == 1">',
						'<td style="text-align:left;width:50%;">Instructor:{[this.findInstructor(values.CLASS_ID)]}</td>',
					'</tpl>',
					'<tpl if="CLASS_STARTDATE !== null" && "CLASS_ENDDATE !== null">',
						'<td style="text-align:right;width:50%;">{[this.parseDate(values.CLASS_STARTDATE)]} - {[this.parseDate(values.CLASS_ENDDATE)]}<td>',
					'</tpl>',
				'</tr>',
			'</table>', {
			//the itemTpl calls these functions to analyze/parse/sort data from the list
			parseDate: function(input){
				var input = input.substr(6,13)/1000*1000;
				var output = new Date(input);
				var offset = output.getTimezoneOffset()*60*1000;
				output = offset + input;
				var convert = new Date(output);
				var finalDate = Ext.Date.format(convert, 'F j, Y');
				return finalDate;
			},
			
			findInstructor: function(input){
				var instructors = [];
				var names = [];
				var ClassInstructorStore = Ext.getStore('ClassInstructorStore');
				var InstructorStore = Ext.getStore('InstructorStore');
				InstructorStore.each(function(record){
					if(record.data.CLASS_ID == input){
						instructors.push(record.data.INSTRUCTOR_ID);
					}
				});
				for(var i=0;i<instructors.length;i++){
					InstructorStore.each(function(record){
						if(record.data.INSTRUCTOR_ID == instructors[i]){
							var name = ' ' + record.data.FIRST_NAME + ' ' + record.data.LAST_NAME;
							names.push(name);
						}
					});
				}
				return names;
			}
		})