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