The DomHelper class provides a layer of abstraction from DOM and transparently supports creating -elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates -from your DOM building code.
- - - - -DomHelper element specification object
- - -A specification object is used when creating elements. Attributes of this object -are assumed to be element attributes, except for 4 special attributes: -
Insertion methods
- - -Commonly used insertion methods: -
Example
- - -This is an example, where an unordered list with 3 children items is appended to an existing
-element with id 'my-div':
-
-
var dh = Ext.core.DomHelper; // create shorthand alias
-// specification object
-var spec = {
- id: 'my-ul',
- tag: 'ul',
- cls: 'my-list',
- // append children after creating
- children: [ // may also specify 'cn' instead of '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'}
- ]
-};
-var list = dh.append(
- 'my-div', // the context element 'my-div' can either be the id or the actual node
- spec // the specification object
-);
- 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: 'item3', html: 'List Item 3'},
- {tag: 'li', id: 'item4', html: 'List Item 4'}
-]);
-Templating
- - -The real power is in the built-in templating. Instead of creating or appending any elements, -createTemplate returns a Template object which can be used over and over to -insert new elements. Revisiting the example above, we could utilize templating this time: -
// create the node
-var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
-// get template
-var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
-
-for(var i = 0; i < 5, i++){
- tpl.append(list, [i]); // use template to append to the actual node
-}
-An example using a template: -
var html = '{2}';
-
-var tpl = new Ext.core.DomHelper.createTemplate(html);
-tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed's Site"]);
-tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
-The same example using named parameters: -
var html = '{text}';
-
-var tpl = new Ext.core.DomHelper.createTemplate(html);
-tpl.append('blog-roll', {
- id: 'link1',
- url: 'http://www.edspencer.net/',
- text: "Ed's Site"
-});
-tpl.append('blog-roll', {
- id: 'link2',
- url: 'http://www.dustindiaz.com/',
- text: "Dustin's Site"
-});
-Compiling Templates
-Templates are applied using regular expressions. The performance is great, but if -you are adding a bunch of DOM elements using the same template, you can increase -performance even further by "compiling" the template. -The way "compile()" works is the template is parsed and -broken up at the different variable points and a dynamic function is created and eval'ed. -The generated function performs string concatenation of these parts and the passed -variables instead of using regular expressions. -
var html = '{text}';
-
-var tpl = new Ext.core.DomHelper.createTemplate(html);
-tpl.compile();
-
-//... use template like normal
-Performance Boost
-DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead -of DOM can significantly boost performance.
-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. Usage:
-Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
-Creates new DOM element(s) without inserting them to the document.
-Creates new DOM element(s) without inserting them to the document.
-Creates new DOM element(s) and appends them to el.
-Creates new DOM element(s) and appends them to el.
-The context element
-The DOM object spec (and children) or raw HTML blob
-(optional) true to return a Ext.core.Element
-The new node
-Applies a style specification to an element.
-Applies a style specification to an element.
-The element to apply styles to
-A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or -a function which returns such a specification.
-Creates a new Ext.Template from the DOM object spec.
-Creates a new Ext.Template from the DOM object spec.
-The DOM object spec (and children)
-The new template
-Creates new DOM element(s) and inserts them after el.
-Creates new DOM element(s) and inserts them after el.
-The context element
-The DOM object spec (and children)
-(optional) true to return a Ext.core.Element
-The new node
-Creates new DOM element(s) and inserts them before el.
-Creates new DOM element(s) and inserts them before el.
-The context element
-The DOM object spec (and children) or raw HTML blob
-(optional) true to return a Ext.core.Element
-The new node
-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.
-The context element
-The DOM object spec (and children) or raw HTML blob
-(optional) true to return a Ext.core.Element
-The new node
-Inserts an HTML fragment into the DOM.
-Inserts an HTML fragment into the DOM.
-Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
-The context element
-The HTML fragment
-The new node
-Returns the markup for the passed Element(s) config.
-Returns the markup for the passed Element(s) config.
-The DOM object spec (and children)
-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.
-The context element
-The DOM object spec (and children) or raw HTML blob
-(optional) true to return a Ext.core.Element
-The new node
-