Print Friendly

# Class Ext.Template

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

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

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

For more information see this blog post with examples.
Properties - Methods - Events

## Public Properties

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

## Public Methods

Method | Defined By
--- | ---
| Template(`String/Array html`) | Template
| Template.from(`String/HTMLElement el`) : void | Template
<static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML
| append(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`]) : HTMLElement | Template
Applies the supplied values to the template and append the new node(s) to el
| apply() : void | Template
Alias for applyTemplate
| applyTemplate(`Object values`) : String | Template
Returns an HTML fragment of this template with the specified values applied
| compile() : void | Template
Compiles the template into an internal function, eliminating the RegEx overhead
| insertAfter(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`]) : HTMLElement | Template
Applies the supplied values to the template and inserts the new node(s) after el
| insertBefore(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`]) : HTMLElement | Template
Applies the supplied values to the template and inserts the new node(s) before el
| insertFirst(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`]) : HTMLElement | Template
Applies the supplied values to the template and inserts the new node(s) as the first child of el
| overwrite(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`]) : HTMLElement | Template
Applies the supplied values to the template and overwrites the content of el with the new node(s)
| set(`String html`, [`Boolean compile`]) : Template | Template
Sets the html used as the template and optionally compiles it

## Public Events

This class has no public events.

## Property Details

### disableFormats

`public Boolean disableFormats`
True to disable format functions (default to false)
This property is defined by Template.

### re

`public RegExp re`
The regular expression used to match template variables
This property is defined by Template.

## Constructor Details

### Template

`public function Template(`String/Array html`)`
Parameters:

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

## Method Details

### Template.from

`public function Template.from(`String/HTMLElement el`)`
<static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML
Parameters:

- `el` : String/HTMLElement

Returns:

- `void`

This method is defined by Template.

### append

`public function append(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`])`
Applies the supplied values to the template and append the new node(s) to el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `values` : Object
  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

Returns:

- `HTMLElement`
  The new node

This method is defined by Template.

### apply

`public function apply()`
Alias for applyTemplate
Parameters:

- None.

Returns:

- `void`

This method is defined by Template.

### applyTemplate

`public function applyTemplate(`Object values`)`
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`

This method is defined by Template.

### compile

`public function compile()`
Compiles the template into an internal function, eliminating the RegEx overhead
Parameters:

- None.

Returns:

- `void`

This method is defined by Template.

### insertAfter

`public function insertAfter(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`])`
Applies the supplied values to the template and inserts the new node(s) after el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `values` : Object
  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

Returns:

- `HTMLElement`
  The new node

This method is defined by Template.

### insertBefore

`public function insertBefore(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`])`
Applies the supplied values to the template and inserts the new node(s) before el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `values` : Object
  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

Returns:

- `HTMLElement`
  The new node

This method is defined by Template.

### insertFirst

`public function insertFirst(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`])`
Applies the supplied values to the template and inserts the new node(s) as the first child of el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `values` : Object
  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

Returns:

- `HTMLElement`
  The new node

This method is defined by Template.

### overwrite

`public function overwrite(`String/HTMLElement/Element el`, `Object values`, [`Boolean returnElement`])`
Applies the supplied values to the template and overwrites the content of el with the new node(s)
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `values` : Object
  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

Returns:

- `HTMLElement`
  The new node

This method is defined by Template.

### set

`public function set(`String html`, [`Boolean compile`])`
Sets the html used as the template and optionally compiles it
Parameters:

- `html` : String
- `compile` : Boolean
  (optional)

Returns:

- `Template`
  this

This method is defined by Template.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.