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