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.