var tpl = Ext.create('Ext.Template', '<div>', 'Hello {name}!', '</div>'); tpl.apply({ name: 'Nigel', dob: new Date(1962, 5, 17) });
var tpl = Ext.create('Ext.XTemplate', '<div>', '{name} was born on {dob:date("d-M-Y")}', '</div>', '<div>', '{name} earns {salary:currency}', '</div>', '<div>', '{name} knows {skills:this.unorderedList}', '</div>', { unorderedList: function(v) { var result = "<ul>"; for (var i = 0; i < v.length; i++) { result += "<li>" + v[i] + "</li>"; } return result + "</ul>"; } }); tpl.apply({ name: 'Nigel', dob: new Date(1962, 5, 17), salary: 25000, skills: ['C++', 'Cobol', 'CSS', 'ExtJS', 'Fortran', 'HTML/DOM', 'Java', 'Javascript', 'Sencha Touch'] });
var tpl = Ext.create('Ext.XTemplate', '<div>', '{name} is {[new Date().getFullYear() - values.dob.getFullYear()]} years old.', '</div>'); tpl.apply({ name: 'Nigel', dob: new Date(1962, 5, 17) });
var tpl = Ext.create('Ext.XTemplate', '<div>', '{name} is {[this.getAge(values.dob)]} years old.', '</div>', { getAge: function(dob) { var year = 1000 * 60 * 60 * 24 * 365.25, now = new Date(), f = dob.getMonth() * 10 + dob.getDate(), f1 = now.getMonth() * 10 + now.getDate(), age = now.getFullYear() - dob.getFullYear(); return (f1 > f) ? age : age - 1; } }); tpl.apply({ name: 'Nigel', dob: new Date(1962, 5, 17) });
var tpl = Ext.create('Ext.XTemplate', '<tpl for=".">', '<div>{#}/{[xcount]}. {name} is {[this.getAge(values.dob)]} years old.</div>', '</tpl>', { getAge: function(dob) { var year = 1000 * 60 * 60 * 24 * 365.25, now = new Date(), f = dob.getMonth() * 10 + dob.getDate(), f1 = now.getMonth() * 10 + now.getDate(), age = now.getFullYear() - dob.getFullYear(); return (f1 > f) ? age : age - 1; } }); tpl.apply([{ name: 'Nigel', dob: new Date(1962, 5, 17), sex: 'M' }, { name: 'Faye', dob: new Date(1964, 1, 22), sex: 'F' }]);
var tpl = Ext.create('Ext.XTemplate', '<div>', '{name} was born on {dob:date("d-M-Y")}', '</div>', '<div>', '{name} earns {salary:currency}', '</div>', '<div>', '{name} knows <ul>', '<tpl for="skills">', '<li>{.}</li>', '</tpl>', '</ul>', '</div>'); tpl.apply({ name: 'Nigel', dob: new Date(1962, 5, 17), salary: 25000, skills: ['C++', 'Cobol', 'CSS', 'ExtJS', 'Fortran', 'HTML/DOM', 'Java', 'Javascript', 'Sencha Touch'] });
var tpl = Ext.create('Ext.XTemplate', '<div>', '{name} was born on {dob:date("d-M-Y")}', '</div>', '<div>', '{name}\'s job:', '<table class="job">', '<tpl for="job">', '<tr><td class="job-prop">Title:</td><td>{title}</td></tr>', '<tr><td class="job-prop">Started:</td><td>{startDate:date("d-M-Y")}</td></tr>', '<tr><td class="job-prop">Salary:</td><td>{salary:currency}</td></tr>', '</tpl>', '</table>', '</div>'); tpl.apply({ name: 'Nigel', dob: new Date(1962, 5, 17), job: { title: 'Sr. Software Architect', startDate: new Date(2011, 0, 10), salary: 25000, } });
var tpl = Ext.create('Ext.XTemplate', '<tpl for=".">', '<div>', '{name} will have a ', '<tpl if="sex=="M"">Beer</tpl>', '<tpl if="sex=="F"">Wine</tpl>', '</div>', '</tpl>'); tpl.apply([{ name: 'Nigel', dob: new Date(1962, 5, 17), sex: 'M' }, { name: 'Faye', dob: new Date(1964, 1, 22), sex: 'F' }]);
var familyTree = Ext.create('Ext.XTemplate', '<tpl for=".">', '<div class="family-member {[this.getClass(values, xindex, xcount)]}">', '{name}', '{[this.renderChildren(values.children)]}', '</div>', '</tpl>', { renderChildren: function(children) { var result = ''; if (children && children.length) { this.level = (this.level||0) + 1; result = this.apply(children); this.level--; } return result; }, getClass: function(values, index, count) { if (!Ext.isDefined(this.level)) { this.level = 0; } var result = (index == 1) ? 'first ' : ''; switch (this.level) { case 0: result += "adult"; break; case 1: result += "child"; break; case 2: result += "grandchild"; } if (values.children && values.children.length) { result += ' has-children'; } return result + ((index == count) ? ' last' : ''); } }); familyTree.apply([{ name: 'Nigel', dob: new Date(1962, 5, 17), sex: 'M' }, { name: 'Faye', dob: new Date(1964, 1, 22), sex: 'F', children: [{ name: 'Theodore', dob: new Date(1989, 4, 12), sex: 'M' }, { name: 'Alisdair', dob: new Date(1987, 5, 6), sex: 'M', children: [{ name: 'Luke', dob: new Date(2009, 8, 20), sex: 'M' }] }] }]);