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

Properties   -  Methods   -  Events

Public Properties

Property Defined By
  disableFormats : Boolean Template
True to disable format functions (defaults 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 ) : s Template
<static> Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML.
  append( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element Template
Applies the supplied values to the template and appends 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() : Ext.Template Template
Compiles the template into an internal function, eliminating the RegEx overhead.
  insertAfter( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element Template
Applies the supplied values to the template and inserts the new node(s) after el.
  insertBefore( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element Template
Applies the supplied values to the template and inserts the new node(s) before el.
  insertFirst( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element Template
Applies the supplied values to the template and inserts the new node(s) as the first child of el.
  overwrite( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element Template
Applies the supplied values to the template and overwrites the content of el with the new node(s).
  set( String html, [Boolean compile] ) : Ext.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 (defaults 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
    A DOM element or its id
Returns:
  • s
    {Ext.Template} The created template
This method is defined by Template.

append

public function append( String/HTMLElement/Ext.Element el, Object values, [Boolean returnElement] )
Applies the supplied values to the template and appends the new node(s) to el.
Parameters:
  • el : String/HTMLElement/Ext.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 (defaults to undefined)
Returns:
  • HTMLElement/Ext.Element
    The new node or Element
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
    The HTML fragment
This method is defined by Template.

compile

public function compile()
Compiles the template into an internal function, eliminating the RegEx overhead.
Parameters:
  • None.
Returns:
  • Ext.Template
    this
This method is defined by Template.

insertAfter

public function insertAfter( String/HTMLElement/Ext.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/Ext.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 (defaults to undefined)
Returns:
  • HTMLElement/Ext.Element
    The new node or Element
This method is defined by Template.

insertBefore

public function insertBefore( String/HTMLElement/Ext.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/Ext.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 (defaults to undefined)
Returns:
  • HTMLElement/Ext.Element
    The new node or Element
This method is defined by Template.

insertFirst

public function insertFirst( String/HTMLElement/Ext.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/Ext.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 (defaults to undefined)
Returns:
  • HTMLElement/Ext.Element
    The new node or Element
This method is defined by Template.

overwrite

public function overwrite( String/HTMLElement/Ext.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/Ext.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 (defaults to undefined)
Returns:
  • HTMLElement/Ext.Element
    The new node or Element
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) True to compile the template (defaults to undefined)
Returns:
  • Ext.Template
    this
This method is defined by Template.
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.