Properties Methods Events Config Options 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 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 the API, but are supported in the templates that can be created

XTemplate provides the templating mechanism built into:

- Ext.DataView
- Ext.ListView
- Ext.form.ComboBox
- Ext.grid.TemplateColumn
- Ext.grid.GroupingView
- Ext.menu.Item
- Ext.layout.MenuLayout
- Ext.ColorPalette

For example usage see the constructor.

## Config Options

Config Options | Defined By
--- | ---
| compiled : Boolean Specify `true` to compile the template immediately (see `compile`). Defaults to `false`. | Template

disableFormats : Boolean
Specify true to disable format functions in the template. If the template does not contain format functions, setting ...
Specify `true` to disable format functions in the template. If the template does not contain format functions, setting `disableFormats` to true will reduce `apply` time. Defaults to `false`.

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

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

Template

re : RegExp
The regular expression used to match template variables. Defaults to:re : /\{([\w-]+)\}/g ...
The regular expression used to match template variables. Defaults to:

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

Template

## Public Properties

This class has no public properties.

## Public Methods

Method | Defined By
--- | ---

XTemplate( `Mixed config` )
The Ext.Template constructor describes the acceptable parameters to pass to the constructor. The following examples d...
The Ext.Template constructor describes the acceptable parameters to pass to the constructor. The following examples demonstrate all of the supported features.

- Sample Data

  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

  The `tpl` tag and the `for` operator are used to process the provided data object:

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

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

- Conditional processing with basic comparison operators

  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:

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

      <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 == "Jack"">Hello</tpl>
      // encode " if it is part of the condition, e.g.
      <tpl if="name == &quot;Jack&quot;">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);

- Basic math support

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

- Execute arbitrary inline code with special built-in template variables

  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 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,
              disableFormats: true,
              // member functions:
              isGirl: function(name){
                  return name == 'Sara Grace';
              },
              isBaby: function(age){
                  return age < 1;
              }
          }
      );
      tpl.overwrite(panel.body, data);

Parameters:

- `config` : Mixed

Returns:

- void

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 the specified el. For example usage see th...
Applies the supplied `values` to the template and appends the new node(s) to the specified `el`.

For example usage see the constructor.

Parameters:

- `el` : Mixed
  The context element
- `values` : Object/Array
  The template values. Can be an array if the params are numeric (i.e. `{0}`) or an object (i.e. `{foo: 'bar'}`).
- `returnElement` : Boolean
  (optional) true to return an 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.