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.