src/core/DomHelper-more.js

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