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', {
        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'}
        ]
    });

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.