docs/source/DomHelper-more.html

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