Files
DomHelper-more.js
DomHelper.js

The DomHelper class provides a layer of abstraction from DOM and transparently supports creating\nelements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates\nfrom your DOM building code.

\n\n\n\n\n

DomHelper element specification object

\n\n\n

A specification object is used when creating elements. Attributes of this object\nare assumed to be element attributes, except for 4 special attributes:\n

tag :
The tag name of the element
children : or cn
An array of the\nsame kind of element definition objects to be created and appended. These can be nested\nas deep as you want.
cls :
The class attribute of the element.\nThis will end up being either the \"class\" attribute on a HTML fragment or className\nfor a DOM node, depending on whether DomHelper is using fragments or DOM.
html :
The innerHTML for the element

\n\n\n\n\n

Insertion methods

\n\n\n

Commonly used insertion methods:\n

append :
insertBefore :
insertAfter :
overwrite :
createTemplate :
insertHtml :

\n\n\n\n\n

Example

\n\n\n

This is an example, where an unordered list with 3 children items is appended to an existing\nelement with id 'my-div':
\n \n

var dh = Ext.DomHelper; // create shorthand alias\n// specification object\nvar spec = {\n    id: 'my-ul',\n    tag: 'ul',\n    cls: 'my-list',\n    // append children after creating\n    children: [     // may also specify 'cn' instead of 'children'\n        {tag: 'li', id: 'item0', html: 'List Item 0'},\n        {tag: 'li', id: 'item1', html: 'List Item 1'},\n        {tag: 'li', id: 'item2', html: 'List Item 2'}\n    ]\n};\nvar list = dh.append(\n    'my-div', // the context element 'my-div' can either be the id or the actual node\n    spec      // the specification object\n);\n

\n\n\n

Element creation specification parameters in this class may also be passed as an Array of\nspecification objects. This can be used to insert multiple sibling nodes into an existing\ncontainer very efficiently. For example, to add more list items to the example above:\n

dh.append('my-ul', [\n    {tag: 'li', id: 'item3', html: 'List Item 3'},\n    {tag: 'li', id: 'item4', html: 'List Item 4'}\n]);\n

\n\n\n\n\n

Templating

\n\n\n

The real power is in the built-in templating. Instead of creating or appending any elements,\ncreateTemplate returns a Template object which can be used over and over to\ninsert new elements. Revisiting the example above, we could utilize templating this time:\n

// create the node\nvar list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});\n// get template\nvar tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});\n\nfor(var i = 0; i < 5, i++){\n    tpl.append(list, [i]); // use template to append to the actual node\n}\n

An example using a template:\n

var html = '{2}';\n\nvar tpl = new Ext.DomHelper.createTemplate(html);\ntpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', \"Jack's Site\"]);\ntpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', \"Dustin's Site\"]);\n

\n\n

The same example using named parameters:\n

var html = '{text}';\n\nvar tpl = new Ext.DomHelper.createTemplate(html);\ntpl.append('blog-roll', {\n    id: 'link1',\n    url: 'http://www.jackslocum.com/',\n    text: \"Jack's Site\"\n});\ntpl.append('blog-roll', {\n    id: 'link2',\n    url: 'http://www.dustindiaz.com/',\n    text: \"Dustin's Site\"\n});\n

\n\n

Compiling Templates

Templates are applied using regular expressions. The performance is great, but if\nyou are adding a bunch of DOM elements using the same template, you can increase\nperformance even further by "compiling" the template.\nThe way \"compile()\" works is the template is parsed and\nbroken up at the different variable points and a dynamic function is created and eval'ed.\nThe generated function performs string concatenation of these parts and the passed\nvariables instead of using regular expressions.\n

var html = '{text}';\n\nvar tpl = new Ext.DomHelper.createTemplate(html);\ntpl.compile();\n\n//... use template like normal\n

\n\n

Performance Boost

DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead\nof DOM can significantly boost performance.

Element creation specification parameters may also be strings. If useDom is false,\nthen the string is used as innerHTML. If useDom is true, a string specification\nresults in the creation of a text node. Usage:

Ext.DomHelper.useDom = true; // force it to use DOM; reduces performance\n

\n\n

Defined By

Properties

Ext.DomHelper
view source

lastIndex : Number

Since we're using the g flag on the regex, we need to set the lastIndex. ...

Since we're using the g flag on the regex, we need to set the lastIndex.\nThis automatically happens on some implementations, but not others, see:\nhttp://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls\nhttp://blog.stevenlevithan.com/archives/fixing-javascript-regexp

Defaults to: 0

Ext.DomHelper
view source

useDom : Boolean

True to force the use of DOM instead of html fragments ...

True to force the use of DOM instead of html fragments

Defaults to: false

Defined By

Methods

Ext.DomHelper
view source

append( el, o, [returnElement] ) : HTMLElement/Ext.Element

Creates new DOM element(s) and appends them to el. ...

Creates new DOM element(s) and appends them to el.

Parameters

el : Mixed
The context element
\n
o : Object/String
The DOM object spec (and children) or raw HTML blob
\n
returnElement : Boolean (optional)
true to return a Ext.Element
\n

Returns

HTMLElement/Ext.Element
The new node
\n

Ext.DomHelper
view source

applyStyles( el, styles )

Applies a style specification to an element. ...

Applies a style specification to an element.

Parameters

el : String/HTMLElement
The element to apply styles to
\n
styles : String/Object/Function
A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or\na function which returns such a specification.
\n

Ext.DomHelper
view source

createDom( o ) : HTMLElement

Creates new DOM element(s) without inserting them to the document. ...

Creates new DOM element(s) without inserting them to the document.

Parameters

o : Object/String
The DOM object spec (and children) or raw HTML blob
\n

Returns

HTMLElement
The new uninserted node
\n

Ext.DomHelper
view source

createTemplate( o ) : Ext.Template

Creates a new Ext.Template from the DOM object spec. ...

Creates a new Ext.Template from the DOM object spec.

Parameters

o : Object
The DOM object spec (and children)
\n

Returns

Ext.Template
The new template
\n

Ext.DomHelper
view source

insertAfter( el, o, [returnElement] ) : HTMLElement/Ext.Element

Creates new DOM element(s) and inserts them after el. ...

Creates new DOM element(s) and inserts them after el.

Parameters

el : Mixed
The context element
\n
o : Object
The DOM object spec (and children)
\n
returnElement : Boolean (optional)
true to return a Ext.Element
\n

Returns

HTMLElement/Ext.Element
The new node
\n

Ext.DomHelper
view source

insertBefore( el, o, [returnElement] ) : HTMLElement/Ext.Element

Creates new DOM element(s) and inserts them before el. ...

Creates new DOM element(s) and inserts them before el.

Parameters

el : Mixed
The context element
\n
o : Object/String
The DOM object spec (and children) or raw HTML blob
\n
returnElement : Boolean (optional)
true to return a Ext.Element
\n

Returns

HTMLElement/Ext.Element
The new node
\n

Ext.DomHelper
view source

insertFirst( el, o, [returnElement] ) : HTMLElement/Ext.Element

Creates new DOM element(s) and inserts them as the first child of el. ...

Creates new DOM element(s) and inserts them as the first child of el.

Parameters

el : Mixed
The context element
\n
o : Object/String
The DOM object spec (and children) or raw HTML blob
\n
returnElement : Boolean (optional)
true to return a Ext.Element
\n

Returns

HTMLElement/Ext.Element
The new node
\n

Ext.DomHelper
view source

insertHtml( where, el, html ) : HTMLElement

Inserts an HTML fragment into the DOM. ...

Inserts an HTML fragment into the DOM.

Parameters

where : String
Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
\n
el : HTMLElement
The context element
\n
html : String
The HTML fragment
\n

Returns

HTMLElement
The new node
\n

Ext.DomHelper
view source

markup( o ) : String

Returns the markup for the passed Element(s) config. ...

Returns the markup for the passed Element(s) config.

Parameters

o : Object
The DOM object spec (and children)
\n

Returns

String
\n

Ext.DomHelper
view source

overwrite( el, o, [returnElement] ) : HTMLElement/Ext.Element

Creates new DOM element(s) and overwrites the contents of el with them. ...

Creates new DOM element(s) and overwrites the contents of el with them.

Parameters

el : Mixed
The context element
\n
o : Object/String
The DOM object spec (and children) or raw HTML blob
\n
returnElement : Boolean (optional)
true to return a Ext.Element
\n

Returns

HTMLElement/Ext.Element
The new node
\n