For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

## Sencha Documentation

# Ext.Template

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

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

  Notes:

  - For a list of available format functions, see Ext.util.Format.
  - `disableFormats` reduces `apply` time when no formatting is required.

Defined By

### Config Options

#### Other Configs

Ext.Template
view source
disableFormats : Boolean
true to disable format functions in the template. If the template doesn't contain format functions, setting disableFo...

true to disable format functions in the template. If the template doesn't contain format functions, setting disableFormats to true will reduce apply time (defaults to false)

Defined By

### Methods

Ext.Template
view source
append( Mixed el, Object/Array values, [Boolean returnElement]) : HTMLElement/Ext.core.Element
Applies the supplied values to the template and appends the new node(s) to the specified el. For example usage see t...

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.core.Element (defaults to undefined)

### Returns

- HTMLElement/Ext.core.Element

  The new node or Element

Ext.Template
view source
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

Ext.Template
view source
from( String/HTMLElement el, Object config) : Ext.Template

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

- config : Object

  A configuration object

### Returns

- Ext.Template

  The created template

Ext.Template
view source
insertAfter( Mixed el, Object/Array values, [Boolean returnElement]) : HTMLElement/Ext.core.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.core.Element (defaults to undefined)

### Returns

- HTMLElement/Ext.core.Element

  The new node or Element

Ext.Template
view source
insertBefore( Mixed el, Object/Array values, [Boolean returnElement]) : HTMLElement/Ext.core.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.core.Element (defaults to undefined)

### Returns

- HTMLElement/Ext.core.Element

  The new node or Element

Ext.Template
view source
insertFirst( Mixed el, Object/Array values, [Boolean returnElement]) : HTMLElement/Ext.core.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.core.Element (defaults to undefined)

### Returns

- HTMLElement/Ext.core.Element

  The new node or Element

Ext.Template
view source
overwrite( Mixed el, Object/Array values, [Boolean returnElement]) : HTMLElement/Ext.core.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.core.Element (defaults to undefined)

### Returns

- HTMLElement/Ext.core.Element

  The new node or Element

Ext.Template
view source
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