src/core/DomHelper-more.js

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