Properties Methods Events Direct Link

    Template
      XTemplate

# Class Ext.XTemplate

Package: | Ext
Defined In: | XTemplate.js
Class: | XTemplate
Extends: | Template

A template class that supports advanced functionality like autofilling arrays, conditional processing with basic comparison operators, sub-templates, basic math function support, special built-in template variables, inline code execution and more. XTemplate also provides the templating mechanism built into Ext.DataView.

XTemplate supports many special tags and built-in operators that aren't defined as part of the API, but are supported in the templates that can be created. The following examples demonstrate all of the supported features. This is the data object used for reference in each code example:

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

Auto filling of arrays and scope switching
Using the `tpl` tag and the `for` operator, you can switch to the scope of the object specified by `for` and access its members to populate the template. If the variable in `for` is an array, it will auto-fill, repeating the template block inside the `tpl` tag for each item in the array:

    var tpl = new Ext.XTemplate(
        '<p>Name: {name}</p>',
        '<p>Title: {title}</p>',
        '<p>Company: {company}</p>',
        '<p>Kids: ',
        '<tpl for="kids">',
            '<p>{name}</p>',
        '</tpl></p>'
    );
    tpl.overwrite(panel.body, data);

Access to parent object from within sub-template scope
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 &gt; 1">',  // <-- Note that the > is encoded
                '<p>{name}</p>',
                '<p>Dad: {parent.name}</p>',
            '</tpl>',
        '</tpl></p>'
    );
    tpl.overwrite(panel.body, data);

Array item index and basic math support
While processing an array, the special variable `{#}` will provide the current array index + 1 (starts at 1, not 0). Templates also support the basic math operators + - * and / that can be applied directly on numeric data values:

    var tpl = new Ext.XTemplate(
        '<p>Name: {name}</p>',
        '<p>Kids: ',
        '<tpl for="kids">',
            '<tpl if="age &gt; 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);

Auto-rendering of flat arrays
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);

Basic conditional logic
Using the `tpl` tag and the `if` operator you can provide conditional checks for deciding whether or not to render specific parts of the template. Note that there is no `else` operator — if needed, you should use two opposite `if` statements. Properly-encoded attributes are required as seen in the following example:

    var tpl = new Ext.XTemplate(
        '<p>Name: {name}</p>',
        '<p>Kids: ',
        '<tpl for="kids">',
            '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
                '<p>{name}</p>',
            '</tpl>',
        '</tpl></p>'
    );
    tpl.overwrite(panel.body, data);

Ability to execute arbitrary inline code
In an XTemplate, anything between {[ ... ]} is considered code to be executed in the scope of the template. There are some special variables available in that code:

- `values`: The values in the current scope. If you are using scope 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 loop you are in (1-based).
- `xcount`: If you are in a looping template, the total length of the array you are looping.
- `fm`: An alias for `Ext.util.Format`.

This example demonstrates basic row striping using an inline code block and the `xindex` variable:

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

Template member functions
One or more member functions can be defined directly on the config 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>',
            '<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>', {
         isGirl: function(name){
             return name == 'Sara Grace';
         },
         isBaby: function(age){
            return age < 1;
         }
    });
    tpl.overwrite(panel.body, data);

## Public Properties

This class has no public properties.

## Public Methods

Method | Defined By
--- | ---
| XTemplate( `String/Array/Object parts` ) Parameters: `parts` : String/Array/Object The HTML fragment or an array of fragments to join(""), or multiple arguments to join("") that can also include a config object Returns: `` | XTemplate
| XTemplate.from( `String/HTMLElement el` ) : Ext.Template <static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. <static> 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 Returns: `Ext.Template` The created template | XTemplate
| append( `Mixed el`, `Object/Array values`, [`Boolean returnElement`] ) : HTMLElement/Ext.Element Applies the supplied values to the template and appends the new node(s) to el. Applies the supplied values to the template and appends the new node(s) to el. Parameters: `el` : Mixed The context element `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'}) `returnElement` : Boolean (optional) true to return a Ext.Element (defaults to undefined) Returns: `HTMLElement/Ext.Element` The new node or Element | Template
| apply( `Object/Array values` ) : String 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. 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'}) Returns: `String` The HTML fragment | XTemplate
| applyTemplate( `Object 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'}) Returns: `String` The HTML fragment | XTemplate
| compile() : Function 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. Parameters: None. Returns: `Function` The compiled function | XTemplate
| insertAfter( `Mixed el`, `Object/Array values`, [`Boolean 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 `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'}) `returnElement` : Boolean (optional) true to return a Ext.Element (defaults to undefined) Returns: `HTMLElement/Ext.Element` The new node or Element | Template
| insertBefore( `Mixed el`, `Object/Array values`, [`Boolean 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 `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'}) `returnElement` : Boolean (optional) true to return a Ext.Element (defaults to undefined) Returns: `HTMLElement/Ext.Element` The new node or Element | Template
| insertFirst( `Mixed el`, `Object/Array values`, [`Boolean 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 `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'}) `returnElement` : Boolean (optional) true to return a Ext.Element (defaults to undefined) Returns: `HTMLElement/Ext.Element` The new node or Element | Template
| overwrite( `Mixed el`, `Object/Array values`, [`Boolean 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 `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'}) `returnElement` : Boolean (optional) true to return a Ext.Element (defaults to undefined) Returns: `HTMLElement/Ext.Element` The new node or Element | Template

## Public Events

This class has no public events.