Properties Methods Events Direct Link

# Class Ext.Template

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

Represents an HTML fragment template. Templates can be precompiled for greater performance. For a list of available format functions, see Ext.util.Format.
Usage:

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

For more information see this blog post with examples: DomHelper - Create Elements using DOM, HTML fragments and Templates.

## Public Properties

Property | Defined By
--- | ---
| disableFormats : Boolean True to disable format functions (defaults to false) | Template
| re : RegExp The regular expression used to match template variables | Template

## Public Methods

Method | Defined By
--- | ---

Template( `String/Array html` )
Parameters:

- `html` : String/Array
  The HTML fragment or an array of fragments to join("") or multiple arguments to join("")

Returns:

- ``

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 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() : void
Alias for applyTemplate
Alias for applyTemplate
Parameters:

- None.

Returns:

- `void`

Template

applyTemplate( `Object/Array 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/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

Template

compile() : Ext.Template
Compiles the template into an internal function, eliminating the RegEx overhead.
Compiles the template into an internal function, eliminating the RegEx overhead.
Parameters:

- None.

Returns:

- `Ext.Template`
  this

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.