Properties Methods Events Direct Link

# Class Ext.DomHelper

Package: | Ext
Defined In: | DomHelper.js
Class: | DomHelper
Extends: | Object

Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
This is an example, where an unordered list with 5 children items is appended to an existing element with id 'my-div':

    var list = dh.append('my-div', {
        id: 'my-ul', tag: 'ul', cls: 'my-list', children: [
            {tag: 'li', id: 'item0', html: 'List Item 0'},
            {tag: 'li', id: 'item1', html: 'List Item 1'},
            {tag: 'li', id: 'item2', html: 'List Item 2'},
            {tag: 'li', id: 'item3', html: 'List Item 3'},
            {tag: 'li', id: 'item4', html: 'List Item 4'}
        ]
    });

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

    dh.append('my-ul', [
        {tag: 'li', id: 'item5', html: 'List Item 5'},
        {tag: 'li', id: 'item6', html: 'List Item 6'} ]);

Element creation specification parameters may also be strings. If useDom is false, then the string is used as innerHTML. If useDom is true, a string specification results in the creation of a text node.

For more information and examples, see the original blog post.
This class is a singleton and cannot be created directly.

## Public Properties

Property | Defined By
--- | ---
| useDom : Boolean True to force the use of DOM instead of html fragments | DomHelper

## Public Methods

Method | Defined By
--- | ---
| append( `Mixed el`, `Object/String o`, [`Boolean 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 `o` : Object/String The DOM object spec (and children) or raw HTML blob `returnElement` : Boolean (optional) true to return a Ext.Element Returns: `HTMLElement/Ext.Element` The new node | DomHelper
| applyStyles( `String/HTMLElement el`, `String/Object/Function styles` ) : void Applies a style specification to an element. Applies a style specification to an element. Parameters: `el` : String/HTMLElement The element to apply styles to `styles` : String/Object/Function A style specification string eg "width:100px", or object in the form {width:"100px"}, or a function which returns such a specification. Returns: `void` | DomHelper
| createTemplate( `Object 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) Returns: `Ext.Template` The new template | DomHelper
| insertAfter( `Mixed el`, `Object o`, [`Boolean 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 `o` : Object The DOM object spec (and children) `returnElement` : Boolean (optional) true to return a Ext.Element Returns: `HTMLElement/Ext.Element` The new node | DomHelper
| insertBefore( `Mixed el`, `Object/String o`, [`Boolean 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 `o` : Object/String The DOM object spec (and children) or raw HTML blob `returnElement` : Boolean (optional) true to return a Ext.Element Returns: `HTMLElement/Ext.Element` The new node | DomHelper
| insertFirst( `Mixed el`, `Object/String o`, [`Boolean 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 `o` : Object/String The DOM object spec (and children) or raw HTML blob `returnElement` : Boolean (optional) true to return a Ext.Element Returns: `HTMLElement/Ext.Element` The new node | DomHelper
| insertHtml( `String where`, `HTMLElement el`, `String 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. `el` : HTMLElement The context element `html` : String The HTML fragmenet Returns: `HTMLElement` The new node | DomHelper
| markup( `Object 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) Returns: `String` | DomHelper
| overwrite( `Mixed el`, `Object/String o`, [`Boolean 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 `o` : Object/String The DOM object spec (and children) or raw HTML blob `returnElement` : Boolean (optional) true to return a Ext.Element Returns: `HTMLElement/Ext.Element` The new node | DomHelper

## Public Events

This class has no public events.