Properties Methods Events Config Options Direct Link

# Class Ext.Template

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

Represents an HTML fragment template. Templates may be precompiled for greater performance.

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

Property | Defined By
--- | ---
| disableFormats : Boolean See `disableFormats`. | Template
| re : RegExp See `re`. | Template

## Public Methods

Method | Defined By
--- | ---

Template( `Mixed config` )
An instance of this class may be created by passing to the constructor either a single argument, or multiple argument...
An instance of this class may be created by passing to the constructor either a single argument, or multiple arguments:

- single argument : String/Array
  The single argument may be either a String or an Array:
  - `String` :

      var t = new Ext.Template("<div>Hello {0}.</div>");
      t.append('some-element', ['foo']);

  - `Array` :
  An Array will be combined with `join('')`.

      var t = new Ext.Template([
          '<div name="{id}">',
              '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
          '</div>',
      ]);
      t.compile();
      t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

- multiple arguments : String, Object, Array, ...
  Multiple arguments will be combined with `join('')`.

      var t = new Ext.Template(
          '<div name="{id}">',
              '<span class="{cls}">{name} {value}</span>',
          '</div>',
          // a configuration object:
          {
              compiled: true,      // compile immediately
              disableFormats: true // See Notes below.
          }
      );

  Notes:

  - Formatting and `disableFormats` are not applicable for Ext Core.
  - For a list of available format functions, see Ext.util.Format.
  - `disableFormats` reduces `apply` time when no formatting is required.

Parameters:

- `config` : Mixed

Returns:

- void

Template

Template.from( `String/HTMLElement el`, `Object config` ) : 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
- `config` : Object
  A configuration object

Returns:

- `Ext.Template`
  The created template

Template

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 the params are numeric (i.e. `{0}`) or an object (i.e. `{foo: 'bar'}`).

Returns:

- `String`
  The HTML fragment

Template

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

set( `String html`, [`Boolean compile`] ) : Ext.Template
Sets the HTML used as the template and optionally compiles it.
Sets the HTML used as the template and optionally compiles it.
Parameters:

- `html` : String
- `compile` : Boolean
  (optional) True to compile the template (defaults to undefined)

Returns:

- `Ext.Template`
  this

Template

## Public Events

This class has no public events.