X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.DomHelper.html diff --git a/docs/output/Ext.DomHelper.html b/docs/output/Ext.DomHelper.html index 987cd5e5..ca785802 100644 --- a/docs/output/Ext.DomHelper.html +++ b/docs/output/Ext.DomHelper.html @@ -1,248 +1,116 @@ -
-
- 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 dh = Ext.DomHelper;
-var list = dh.append('my-div', {
-    id: 'my-ul', tag: 'ul', cls: 'my-list', children: [
+
Properties
Methods
Events
Direct Link
Class Ext.DomHelper
Package:Ext
Defined In:DomHelper.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'},
-        {tag: 'li', id: 'item3', html: 'List Item 3'},
-        {tag: 'li', id: 'item4', html: 'List Item 4'}
+        {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: 'item5', html: 'List Item 5'},
-    {tag: 'li', id: 'item6', html: 'List Item 6'} ]);

-

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.

-For more information and examples, see the original blog post.

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

Public Events

-
This class has no public events.
-
\ No newline at end of file + {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

Public Events

This class has no public events.
\ No newline at end of file