X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..92c2b89db26be16707f4a805d3303ab2531006e1:/docs/output/Ext.DomHelper.html?ds=sidebyside diff --git a/docs/output/Ext.DomHelper.html b/docs/output/Ext.DomHelper.html index a9dfbb5c..97dc1d03 100644 --- a/docs/output/Ext.DomHelper.html +++ b/docs/output/Ext.DomHelper.html @@ -1,115 +1,123 @@ -
Properties Methods Events Direct Link

Class Ext.DomHelper

Package:Ext
Defined In:DomHelper.js, DomHelper-more.js
Class:DomHelper
Extends:Object

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: -

    -
  • tag :
    The tag name of the element
    • -
  • children : or cn
    An array of the -same kind of element definition objects to be created and appended. These can be nested -as deep as you want.
    • -
  • cls :
    The class attribute of the element. -This will end up being either the "class" attribute on a HTML fragment or className -for a DOM node, depending on whether DomHelper is using fragments or DOM.
    • -
  • html :
    The innerHTML for the element
    • -

-

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.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 = '"{0}" href="{1}" class="nav">{2}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.append('blog-roll', ['link1', 'http://www.jackslocum.com/', "Jack's Site"]);
-tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);

-

The same example using named parameters:

var html = '"{id}" href="{url}" class="nav">{text}';
-
-var tpl = new Ext.DomHelper.createTemplate(html);
-tpl.append('blog-roll', {
-    id: 'link1',
-    url: 'http://www.jackslocum.com/',
-    text: "Jack'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 = '"{id}" href="{url}" class="nav">{text}';
-
-var tpl = new Ext.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.DomHelper.useDom = true; // force it to use DOM; reduces performance


This class is a singleton and cannot be created directly.

Public Properties

PropertyDefined By
 useDom : Boolean
True to force the use of DOM instead of html fragments
DomHelper

Public Methods

MethodDefined By