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( `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 | 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.