Hierarchy
Ext.TemplateExt.XTemplate
A template class that supports advanced functionality like:
XTemplate provides the templating mechanism built into:
The Ext.Template describes the acceptable parameters to pass to the constructor. The following examples demonstrate all of the supported features.
This is the data object used for reference in each code example:
var data = {
name: 'Tommy Maintz',
title: 'Lead Developer',
company: 'Sencha Inc.',
email: 'tommy@sencha.com',
address: '5 Cups Drive',
city: 'Palo Alto',
state: 'CA',
zip: '44102',
drinks: ['Coffee', 'Soda', 'Water'],
kids: [{
name: 'Joshua',
age:3
},{
name: 'Matthew',
age:2
},{
name: 'Solomon',
age:0
}]
};
The tpl tag and the for operator are used to process the provided data object:
<tpl for=".">...</tpl> // loop through array at root node
<tpl for="foo">...</tpl> // loop through array at foo node
<tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
Using the sample data above:
var tpl = new Ext.XTemplate(
'<p>Kids: ',
'<tpl for=".">', // process the data.kids node
'<p>{#}. {name}</p>', // use current array index to autonumber
'</tpl></p>'
);
tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
An example illustrating how the for property can be leveraged to access specified members of the provided data object to populate the template:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">', // interrogate the kids property within the data
'<p>{name}</p>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data); // pass the root node of the data object
Flat arrays that contain values (and not objects) can be auto-rendered using the special {.} variable inside a loop. This variable will represent the value of the array at the current index:
var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);
When processing a sub-template, for example while looping through a child array, you can access the parent object's members via the parent object:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
The tpl tag and the if operator are used to provide conditional checks for deciding whether or not to render specific parts of the template. Notes:
<tpl if="age > 1 && age < 10">Child</tpl>
<tpl if="age >= 10 && age < 18">Teenager</tpl>
<tpl if="this.isGirl(name)">...</tpl>
<tpl if="id==\'download\'">...</tpl>
<tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
// no good:
<tpl if="name == "Tommy"">Hello</tpl>
// encode " if it is part of the condition, e.g.
<tpl if="name == "Tommy"">Hello</tpl>
Using the sample data above:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
The following basic math operators may be applied directly on numeric data values:
+ - * /For example:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">', // <-- Note that the > is encoded
'<p>{#}: {name}</p>', // <-- Auto-number each item
'<p>In 5 Years: {age+5}</p>', // <-- Basic math
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
Anything between {[ ... ]}
is considered code to be executed
in the scope of the template. There are some special variables available in that code:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
One or more member functions can be specified in a configuration object passed into the XTemplate constructor for more complex processing:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
// use opposite if statement to simulate 'else' processing:
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>',
{
// XTemplate configuration:
compiled: true,
// member functions:
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
}
);
tpl.overwrite(panel.body, data);
The regular expression used to match code variables (default: matches {[expression]}).
The regular expression used to match code variables (default: matches {[expression]}).
Applies the supplied values
to the template and appends
the new node(s) to the specified el
.
For example usage see the constructor.
The context element
The template values. Can be an array if the params are numeric (i.e. {0}
)
or an object (i.e. {foo: 'bar'}
).
(optional) true to return an Ext.core.Element (defaults to undefined)
The new node or Element
Alias for applyTemplate Returns an HTML fragment of this template with the specified values applied.
Alias for applyTemplate Returns an HTML fragment of this template with the specified values applied.
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
The HTML fragment
Returns an HTML fragment of this template with the specified values applied.
Returns an HTML fragment of this template with the specified values applied.
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
The HTML fragment
Compile the template to a function for optimized performance. Recommended if the template will be used frequently.
Compile the template to a function for optimized performance. Recommended if the template will be used frequently.
The compiled function
Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
A DOM element or its id
The created template
Applies the supplied values to the template and inserts the new node(s) after el.
Applies the supplied values to the template and inserts the new node(s) after el.
The context element
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
(optional) true to return a Ext.core.Element (defaults to undefined)
The new node or Element
Applies the supplied values to the template and inserts the new node(s) before el.
Applies the supplied values to the template and inserts the new node(s) before el.
The context element
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
(optional) true to return a Ext.core.Element (defaults to undefined)
The new node or Element
Applies the supplied values to the template and inserts the new node(s) as the first child of el.
Applies the supplied values to the template and inserts the new node(s) as the first child of el.
The context element
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
(optional) true to return a Ext.core.Element (defaults to undefined)
The new node or Element
Applies the supplied values to the template and overwrites the content of el with the new node(s).
Applies the supplied values to the template and overwrites the content of el with the new node(s).
The context element
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
(optional) true to return a Ext.core.Element (defaults to undefined)
The new node or Element