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
- 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>
-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
-