Print Friendly

# Class Ext.DomHelper

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

Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM. For more information see this blog post with examples.
This class is a singleton and cannot be created directly.
Properties - Methods - Events

## Public Properties

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

## Public Methods

Method | Defined By
--- | ---
| append(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`]) : HTMLElement | DomHelper
Creates new Dom element(s) and appends them to el
| applyStyles(`String/HTMLElement el`, `String/Object/Function styles`) : void | DomHelper
Applies a style specification to an element
| createTemplate(`Object o`) : Ext.DomHelper.Template | DomHelper
Creates a new Ext.DomHelper.Template from the Dom object spec
| insertAfter(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`]) : HTMLElement | DomHelper
Creates new Dom element(s) and inserts them after el
| insertBefore(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`]) : HTMLElement | DomHelper
Creates new Dom element(s) and inserts them before el
| insertFirst(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`]) : HTMLElement | DomHelper
Creates new Dom element(s) and inserts them as the first child of el
| insertHtml(`String where`, `HTMLElement el`, `String html`) : HTMLElement | DomHelper
Inserts an HTML fragment into the Dom
| markup(`Object o`) : String | DomHelper
Returns the markup for the passed Element(s) config
| overwrite(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`]) : HTMLElement | DomHelper
Creates new Dom element(s) and overwrites the contents of el with them

## Public Events

This class has no public events.

## Property Details

### useDom

`public Boolean useDom`
True to force the use of DOM instead of html fragments
This property is defined by DomHelper.

## Method Details

### append

`public function append(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`])`
Creates new Dom element(s) and appends them to el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `o` : Object
  The Dom object spec (and children)
- `returnElement` : Boolean
  (optional) true to return a Ext.Element

Returns:

- `HTMLElement`
  The new node

This method is defined by DomHelper.

### applyStyles

`public function applyStyles(`String/HTMLElement el`, `String/Object/Function styles`)`
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`

This method is defined by DomHelper.

### createTemplate

`public function createTemplate(`Object o`)`
Creates a new Ext.DomHelper.Template from the Dom object spec
Parameters:

- `o` : Object
  The Dom object spec (and children)

Returns:

- `Ext.DomHelper.Template`
  The new template

This method is defined by DomHelper.

### insertAfter

`public function insertAfter(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`])`
Creates new Dom element(s) and inserts them after el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `o` : Object
  The Dom object spec (and children)
- `returnElement` : Boolean
  (optional) true to return a Ext.Element

Returns:

- `HTMLElement`
  The new node

This method is defined by DomHelper.

### insertBefore

`public function insertBefore(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`])`
Creates new Dom element(s) and inserts them before el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `o` : Object
  The Dom object spec (and children)
- `returnElement` : Boolean
  (optional) true to return a Ext.Element

Returns:

- `HTMLElement`
  The new node

This method is defined by DomHelper.

### insertFirst

`public function insertFirst(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`])`
Creates new Dom element(s) and inserts them as the first child of el
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `o` : Object
  The Dom object spec (and children)
- `returnElement` : Boolean
  (optional) true to return a Ext.Element

Returns:

- `HTMLElement`
  The new node

This method is defined by DomHelper.

### insertHtml

`public function insertHtml(`String where`, `HTMLElement el`, `String html`)`
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

This method is defined by DomHelper.

### markup

`public function markup(`Object o`)`
Returns the markup for the passed Element(s) config
Parameters:

- `o` : Object
  The Dom object spec (and children)

Returns:

- `String`

This method is defined by DomHelper.

### overwrite

`public function overwrite(`String/HTMLElement/Element el`, `Object o`, [`Boolean returnElement`])`
Creates new Dom element(s) and overwrites the contents of el with them
Parameters:

- `el` : String/HTMLElement/Element
  The context element
- `o` : Object
  The Dom object spec (and children)
- `returnElement` : Boolean
  (optional) true to return a Ext.Element

Returns:

- `HTMLElement`
  The new node

This method is defined by DomHelper.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.