Generating Dynamic Markup

DomHelper

DomHelper (abbreviated DH) is a utility class used to dynamically generate markup and works around many cross-browser issues encountered when creating markup using raw DOM scripting. DH is intelligent enough to use HTML Fragments and innerHTML where appropriate to optimize speed without sacrificing compatibility. Since Ext.DomHelper is a singleton, all its methods can be accessed statically without instantiating a new instance of the class.

Ext.DomHelper is a singleton. Therefore you can access all of its methods statically without instantiating a new instance of the class.

markup

Same as the deprecated createHtml

insertHtml

insertBefore

insertAfter

insertFirst

append

overwrite

var myEl = document.createElement('a');
myEl.href = 'http://www.yahoo.com/';
myEl.innerHTML = 'My Link';
myEl.setAttribute('target', '_blank');

var myDiv = document.createElement('div');
myDiv.id = 'my-div';

myDiv.appendChild(myEl);
document.body.appendChild(myDiv);	

Ext.DomHelper.append(document.body, {
    id: 'my-div',
    cn: [{
    	tag: 'a', 
    	href: 'http://www.yahoo.com/', 
    	html: 'My Link', 
    	target: '_blank'
    }]
});

DomHelper Configurations

When dynamically generating markup with Ext.DomHelper, a DomHelper configuration is used to specify what markup to create and place in the page. A DomHelper configuration is a representation of any arbitrary HTMLElement to be created on the page.

<a href="http://www.extjs.com">Ext JS</a>

{
    tag: 'a',
    href: 'http://www.extjs.com',
    html: 'Ext JS'
}

Template

Tpl, formatting functions, static method from (importance of textarea)

Template member methods

Adding & executing member formatting functions