Hierarchy
Ext.TemplateExt.XTemplate
Files
XTemplate.js

A template class that supports advanced functionality like:

Autofilling arrays using templates and sub-templates
Conditional processing with basic comparison operators
Basic math function support
Execute arbitrary inline code with special built-in template variables
Custom member functions
Many special tags and built-in operators that aren't defined as part of\nthe API, but are supported in the templates that can be created

\n\n\n

XTemplate provides the templating mechanism built into:

\n\n\n\n\n

For example usage see the constructor.

\n\n

Defined By

Config options

Ext.Template
view source

compiled : Boolean

Specify true to compile the template\nimmediately (see compile). ...

Specify true to compile the template\nimmediately (see compile).\nDefaults to false.

Ext.Template
view source

disableFormats : Boolean

Specify true to disable format\nfunctions in the template. ...

Specify true to disable format\nfunctions in the template. If the template does not contain\nformat functions, setting disableFormats\nto true will reduce apply time. Defaults to false.

\n\n

var t = new Ext.Template(\n    '<div name=\"{id}\">',\n        '<span class=\"{cls}\">{name} {value}</span>',\n    '</div>',\n    {\n        compiled: true,      // compile immediately\n        disableFormats: true // reduce apply time since no formatting\n    }\n);\n

\n\n\n

For a list of available format functions, see Ext.util.Format.

Defaults to: false

Ext.Template
view source

re : RegExp

The regular expression used to match template variables. ...

The regular expression used to match template variables.\nDefaults to:

\n\n

re : /\\{([\\w\\-]+)\\}/g                                     // for Ext Core\nre : /\\{([\\w\\-]+)(?:\\:([\\w\\.]*)(?:\\((.*?)?\\))?)?\\}/g      // for Ext JS\n

\n\n

Defaults to: /\\{([\\w\\-]+)\\}/g

Defined By

Properties

Ext.Template
view source

html : Objectprivate

Methods

Defined By

Instance Methods

Ext.XTemplate
view source

newExt.XTemplate( config ) : Ext.XTemplate

The Ext.Template constructor describes\nthe acceptable parameters to pass to the constructor. ...

The Ext.Template constructor describes\nthe acceptable parameters to pass to the constructor. The following\nexamples demonstrate all of the supported features.

\n\n

Sample Data\n

This is the data object used for reference in each code example:

var data = {\n    name: 'Jack Slocum',\n    title: 'Lead Developer',\n    company: 'Ext JS, LLC',\n    email: 'jack@extjs.com',\n    address: '4 Red Bulls Drive',\n    city: 'Cleveland',\n    state: 'Ohio',\n    zip: '44102',\n    drinks: ['Red Bull', 'Coffee', 'Water'],\n    kids: [{\n        name: 'Sara Grace',\n        age:3\n    },{\n        name: 'Zachary',\n        age:2\n    },{\n        name: 'John James',\n        age:0\n    }]\n};\n

Auto filling of arrays\n

The tpl tag and the for operator are used\nto process the provided data object:\n

If the value specified in for is an array, it will auto-fill,\nrepeating the template block inside the tpl tag for each item in the\narray.
If for=\".\" is specified, the data object provided is examined.
While processing an array, the special variable {#}\nwill provide the current array index + 1 (starts at 1, not 0).

<tpl for=\".\">...</tpl>       // loop through array at root node\n<tpl for=\"foo\">...</tpl>     // loop through array at foo node\n<tpl for=\"foo.bar\">...</tpl> // loop through array at foo.bar node\n

\nUsing the sample data above:\n

var tpl = new Ext.XTemplate(\n    '<p>Kids: ',\n    '<tpl for=\".\">',       // process the data.kids node\n        '<p>{#}. {name}</p>',  // use current array index to autonumber\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data.kids); // pass the kids property of the data object\n

An example illustrating how the for property can be leveraged\nto access specified members of the provided data object to populate the template:

var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Title: {title}</p>',\n    '<p>Company: {company}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',     // interrogate the kids property within the data\n        '<p>{name}</p>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);  // pass the root node of the data object\n

Flat arrays that contain values (and not objects) can be auto-rendered\nusing the special {.} variable inside a loop. This variable\nwill represent the value of the array at the current index:

var tpl = new Ext.XTemplate(\n    '<p>{name}\\'s favorite beverages:</p>',\n    '<tpl for=\"drinks\">',\n       '<div> - {.}</div>',\n    '</tpl>'\n);\ntpl.overwrite(panel.body, data);\n

When processing a sub-template, for example while looping through a child array,\nyou can access the parent object's members via the parent object:

var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"age > 1\">',\n            '<p>{name}</p>',\n            '<p>Dad: {parent.name}</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n

Conditional processing with basic comparison operators\n

The tpl tag and the if operator are used\nto provide conditional checks for deciding whether or not to render specific\nparts of the template. Notes:

Double quotes must be encoded if used within the conditional
There is no else operator — if needed, two opposite\nif statements should be used.

<tpl if=\"age > 1 && age < 10\">Child</tpl>\n<tpl if=\"age >= 10 && age < 18\">Teenager</tpl>\n<tpl if=\"this.isGirl(name)\">...</tpl>\n<tpl if=\"id==\\'download\\'\">...</tpl>\n<tpl if=\"needsIcon\"><img src=\"{icon}\" class=\"{iconCls}\"/></tpl>\n// no good:\n<tpl if=\"name == \"Jack\"\">Hello</tpl>\n// encode " if it is part of the condition, e.g.\n<tpl if=\"name == &quot;Jack&quot;\">Hello</tpl>\n

\nUsing the sample data above:\n

var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"age > 1\">',\n            '<p>{name}</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n

Basic math support\n

The following basic math operators may be applied directly on numeric\ndata values:

+ - * /\n

\nFor example:\n

var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"age &gt; 1\">',  // <-- Note that the > is encoded\n            '<p>{#}: {name}</p>',  // <-- Auto-number each item\n            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math\n            '<p>Dad: {parent.name}</p>',\n        '</tpl>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n

Execute arbitrary inline code with special built-in template variables\n
\n
Anything between {[ ... ]} is considered code to be executed\nin the scope of the template. There are some special variables available in that code:\n
- values: The values in the current scope. If you are using\nscope changing sub-templates, you can change what values is.
- parent: The scope (values) of the ancestor template.
- xindex: If you are in a looping template, the index of the\nloop you are in (1-based).
- xcount: If you are in a looping template, the total length\nof the array you are looping.
- fm: An alias for Ext.util.Format.
\nThis example demonstrates basic row striping using an inline code block and the\nxindex variable:
\n
```
var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Company: {[values.company.toUpperCase() + \", \" + values.title]}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n       '<div class=\"{[xindex % 2 === 0 ? \"even\" : \"odd\"]}\">',\n        '{name}',\n        '</div>',\n    '</tpl></p>'\n);\ntpl.overwrite(panel.body, data);\n
```
\n
\n

Template member functions\n

One or more member functions can be specified in a configuration\nobject passed into the XTemplate constructor for more complex processing:

var tpl = new Ext.XTemplate(\n    '<p>Name: {name}</p>',\n    '<p>Kids: ',\n    '<tpl for=\"kids\">',\n        '<tpl if=\"this.isGirl(name)\">',\n            '<p>Girl: {name} - {age}</p>',\n        '</tpl>',\n        // use opposite if statement to simulate 'else' processing:\n        '<tpl if=\"this.isGirl(name) == false\">',\n            '<p>Boy: {name} - {age}</p>',\n        '</tpl>',\n        '<tpl if=\"this.isBaby(age)\">',\n            '<p>{name} is a baby!</p>',\n        '</tpl>',\n    '</tpl></p>',\n    {\n        // XTemplate configuration:\n        compiled: true,\n        disableFormats: true,\n        // member functions:\n        isGirl: function(name){\n            return name == 'Sara Grace';\n        },\n        isBaby: function(age){\n            return age < 1;\n        }\n    }\n);\ntpl.overwrite(panel.body, data);\n

\n\n

Parameters

config : Mixed
\n

Returns

Ext.XTemplate
\n

Overrides: Ext.Template.constructor

Ext.Template
view source

append( el, values, [returnElement] ) : HTMLElement/Ext.Element

Applies the supplied values to the template and appends\nthe new node(s) to the specified el. ...

Applies the supplied values to the template and appends\nthe new node(s) to the specified el.

\n\n

For example usage see the constructor.

\n\n

Parameters

el : Mixed
The context element
\n
values : Object/Array
The template values. Can be an array if the params are numeric (i.e. {0})\nor an object (i.e. {foo: 'bar'}).
\n
returnElement : Boolean (optional)
true to return an Ext.Element (defaults to undefined)
\n

Returns

HTMLElement/Ext.Element
The new node or Element
\n

Ext.XTemplate
view source

apply( values ) : String

Alias for applyTemplate\nReturns an HTML fragment of this template with the specified values applied. ...

Alias for applyTemplate\nReturns an HTML fragment of this template with the specified values applied.

Parameters

values : Object/Array
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n

Returns

String
The HTML fragment
\n

Overrides: Ext.Template.apply

Ext.XTemplate
view source

applyTemplate( values ) : String

Returns an HTML fragment of this template with the specified values applied. ...

Returns an HTML fragment of this template with the specified values applied.

Parameters

values : Object
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n

Returns

String
The HTML fragment
\n

Overrides: Ext.Template.applyTemplate

Ext.XTemplate
view source

compile( ) : Functionchainable

Compile the template to a function for optimized performance. ...

Compile the template to a function for optimized performance. Recommended if the template will be used frequently.

Returns

Function
The compiled function
\n

Overrides: Ext.Template.compile

Ext.Template
view source

insertAfter( el, values, [returnElement] ) : HTMLElement/Ext.Element

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.

Parameters

el : Mixed
The context element
\n
values : Object/Array
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n
returnElement : Boolean (optional)
true to return a Ext.Element (defaults to undefined)
\n

Returns

HTMLElement/Ext.Element
The new node or Element
\n

Ext.Template
view source

insertBefore( el, values, [returnElement] ) : HTMLElement/Ext.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.

Parameters

el : Mixed
The context element
\n
values : Object/Array
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n
returnElement : Boolean (optional)
true to return a Ext.Element (defaults to undefined)
\n

Returns

HTMLElement/Ext.Element
The new node or Element
\n

Ext.Template
view source

insertFirst( el, values, [returnElement] ) : HTMLElement/Ext.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.

Parameters

el : Mixed
The context element
\n
values : Object/Array
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n
returnElement : Boolean (optional)
true to return a Ext.Element (defaults to undefined)
\n

Returns

HTMLElement/Ext.Element
The new node or Element
\n

Ext.Template
view source

overwrite( el, values, [returnElement] ) : HTMLElement/Ext.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).

Parameters

el : Mixed
The context element
\n
values : Object/Array
The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
\n
returnElement : Boolean (optional)
true to return a Ext.Element (defaults to undefined)
\n

Returns

HTMLElement/Ext.Element
The new node or Element
\n

Defined By

Static Methods

Ext.XTemplate
view source

from( el ) : Ext.Templatestatic

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.

Parameters

el : String/HTMLElement
A DOM element or its id
\n

Returns

Ext.Template
The created template
\n