XTemplate
- Auto filling of arrays and scope switching
- Access to parent object from within sub-template scope
- Array item index variable
- Basic math operator support on data values
- Auto-rendering of flat arrays (containing non-object values)
- Basic conditional logic using if
- Ability to execute arbitrary inline code within the template
- Support for template config properties
- Custom template methods via the config object
var tpl = new Ext.XTemplate(
'<fieldset style="padding:10px;width:250px;"><legend>{title}</legend>',
'<tpl for="foods">',
'<div>{quantity} - {name} ({desc})</div>',
'</tpl>',
'</fieldset>'
);
tpl.compile();
var shoppingList = {
title: 'Shopping List',
foods: [
{quantity: '5', name: 'Apples', desc: 'Red and juicy'},
{quantity: '1', name: 'Bread', desc: 'Whole wheat'},
{quantity: '2', name: 'Cookies', desc: 'Chocolate chip'}
]
};
tpl.append('shoppingList', shoppingList);