Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / DomHelper-more.html
1 <html>\r
2 <head>\r
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
4   <title>The source code</title>\r
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
7 </head>\r
8 <body  onload="prettyPrint();">\r
9     <pre class="prettyprint lang-js"><div id="cls-Ext.DomHelper"></div>/**\r
10  * @class Ext.DomHelper\r
11  */\r
12 Ext.apply(Ext.DomHelper,\r
13 function(){\r
14         var pub,\r
15                 afterbegin = 'afterbegin',\r
16         afterend = 'afterend',\r
17         beforebegin = 'beforebegin',\r
18         beforeend = 'beforeend';\r
19 \r
20         // private\r
21     function doInsert(el, o, returnElement, pos, sibling, append){\r
22         el = Ext.getDom(el);\r
23         var newNode;\r
24         if (pub.useDom) {\r
25             newNode = createDom(o, null);\r
26             if (append) {\r
27                     el.appendChild(newNode);\r
28             } else {\r
29                         (sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);\r
30             }\r
31         } else {\r
32             newNode = Ext.DomHelper.insertHtml(pos, el, Ext.DomHelper.createHtml(o));\r
33         }\r
34         return returnElement ? Ext.get(newNode, true) : newNode;\r
35     }\r
36 \r
37         // build as dom\r
38     /** @ignore */\r
39     function createDom(o, parentNode){\r
40         var el,\r
41                 doc = document,\r
42                 useSet,\r
43                 attr,\r
44                 val,\r
45                 cn;\r
46 \r
47         if (Ext.isArray(o)) {                       // Allow Arrays of siblings to be inserted\r
48             el = doc.createDocumentFragment(); // in one shot using a DocumentFragment\r
49                 Ext.each(o, function(v) {\r
50                 createDom(v, el);\r
51             });\r
52         } else if (Ext.isString(o)) {         // Allow a string as a child spec.\r
53             el = doc.createTextNode(o);\r
54         } else {\r
55             el = doc.createElement( o.tag || 'div' );\r
56             useSet = !!el.setAttribute; // In IE some elements don't have setAttribute\r
57             Ext.iterate(o, function(attr, val){\r
58                 if(!/tag|children|cn|html|style/.test(attr)){\r
59                         if(attr == 'cls'){\r
60                             el.className = val;\r
61                         }else{\r
62                         if(useSet){\r
63                             el.setAttribute(attr, val);\r
64                         }else{\r
65                             el[attr] = val;\r
66                         }\r
67                         }\r
68                 }\r
69             });\r
70             Ext.DomHelper.applyStyles(el, o.style);\r
71 \r
72             if ((cn = o.children || o.cn)) {\r
73                 createDom(cn, el);\r
74             } else if (o.html) {\r
75                 el.innerHTML = o.html;\r
76             }\r
77         }\r
78         if(parentNode){\r
79            parentNode.appendChild(el);\r
80         }\r
81         return el;\r
82     }\r
83 \r
84         pub = {\r
85                 <div id="method-Ext.DomHelper-createTemplate"></div>/**\r
86              * Creates a new Ext.Template from the DOM object spec.\r
87              * @param {Object} o The DOM object spec (and children)\r
88              * @return {Ext.Template} The new template\r
89              */\r
90             createTemplate : function(o){\r
91                 var html = Ext.DomHelper.createHtml(o);\r
92                 return new Ext.Template(html);\r
93             },\r
94 \r
95                 <div id="prop-Ext.DomHelper-useDom"></div>/** True to force the use of DOM instead of html fragments @type Boolean */\r
96             useDom : false,\r
97 \r
98             <div id="method-Ext.DomHelper-insertBefore"></div>/**\r
99              * Creates new DOM element(s) and inserts them before el.\r
100              * @param {Mixed} el The context element\r
101              * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
102              * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
103              * @return {HTMLElement/Ext.Element} The new node\r
104          * @hide (repeat)\r
105              */\r
106             insertBefore : function(el, o, returnElement){\r
107                 return doInsert(el, o, returnElement, beforebegin);\r
108             },\r
109 \r
110             <div id="method-Ext.DomHelper-insertAfter"></div>/**\r
111              * Creates new DOM element(s) and inserts them after el.\r
112              * @param {Mixed} el The context element\r
113              * @param {Object} o The DOM object spec (and children)\r
114              * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
115              * @return {HTMLElement/Ext.Element} The new node\r
116          * @hide (repeat)\r
117              */\r
118             insertAfter : function(el, o, returnElement){\r
119                 return doInsert(el, o, returnElement, afterend, 'nextSibling');\r
120             },\r
121 \r
122             <div id="method-Ext.DomHelper-insertFirst"></div>/**\r
123              * Creates new DOM element(s) and inserts them as the first child of el.\r
124              * @param {Mixed} el The context element\r
125              * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
126              * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
127              * @return {HTMLElement/Ext.Element} The new node\r
128          * @hide (repeat)\r
129              */\r
130             insertFirst : function(el, o, returnElement){\r
131                 return doInsert(el, o, returnElement, afterbegin, 'firstChild');\r
132             },\r
133 \r
134             <div id="method-Ext.DomHelper-append"></div>/**\r
135              * Creates new DOM element(s) and appends them to el.\r
136              * @param {Mixed} el The context element\r
137              * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
138              * @param {Boolean} returnElement (optional) true to return a Ext.Element\r
139              * @return {HTMLElement/Ext.Element} The new node\r
140          * @hide (repeat)\r
141              */\r
142             append: function(el, o, returnElement){\r
143             return doInsert(el, o, returnElement, beforeend, '', true);\r
144         },\r
145 \r
146             <div id="method-Ext.DomHelper-createDom"></div>/**\r
147              * Creates new DOM element(s) without inserting them to the document.\r
148              * @param {Object/String} o The DOM object spec (and children) or raw HTML blob\r
149              * @return {HTMLElement} The new uninserted node\r
150              */\r
151         createDom: createDom\r
152         };\r
153         return pub;\r
154 }());</pre>    \r
155 </body>\r
156 </html>