docs/source/DomHelper.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-core.DomHelper'>/**
   2 </span> * @class Ext.core.DomHelper
   3  * &lt;p&gt;The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
   4  * elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
   5  * from your DOM building code.&lt;/p&gt;
   6  *
   7  * &lt;p&gt;&lt;b&gt;&lt;u&gt;DomHelper element specification object&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
   8  * &lt;p&gt;A specification object is used when creating elements. Attributes of this object
   9  * are assumed to be element attributes, except for 4 special attributes:
  10  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  11  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;tag&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The tag name of the element&lt;/div&gt;&lt;/li&gt;
  12  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;children&lt;/tt&gt;&lt;/b&gt; : or &lt;tt&gt;cn&lt;/tt&gt;&lt;div class=&quot;sub-desc&quot;&gt;An array of the
  13  * same kind of element definition objects to be created and appended. These can be nested
  14  * as deep as you want.&lt;/div&gt;&lt;/li&gt;
  15  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;cls&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The class attribute of the element.
  16  * This will end up being either the &quot;class&quot; attribute on a HTML fragment or className
  17  * for a DOM node, depending on whether DomHelper is using fragments or DOM.&lt;/div&gt;&lt;/li&gt;
  18  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;html&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;The innerHTML for the element&lt;/div&gt;&lt;/li&gt;
  19  * &lt;/ul&gt;&lt;/div&gt;&lt;/p&gt;
  20  *
  21  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Insertion methods&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
  22  * &lt;p&gt;Commonly used insertion methods:
  23  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  24  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #append}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
  25  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #insertBefore}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
  26  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #insertAfter}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
  27  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #overwrite}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
  28  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #createTemplate}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
  29  * &lt;li&gt;&lt;b&gt;&lt;tt&gt;{@link #insertHtml}&lt;/tt&gt;&lt;/b&gt; : &lt;div class=&quot;sub-desc&quot;&gt;&lt;/div&gt;&lt;/li&gt;
  30  * &lt;/ul&gt;&lt;/div&gt;&lt;/p&gt;
  31  *
  32  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Example&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
  33  * &lt;p&gt;This is an example, where an unordered list with 3 children items is appended to an existing
  34  * element with id &lt;tt&gt;'my-div'&lt;/tt&gt;:&lt;br&gt;
  35  &lt;pre&gt;&lt;code&gt;
  36 var dh = Ext.core.DomHelper; // create shorthand alias
  37 // specification object
  38 var spec = {
  39     id: 'my-ul',
  40     tag: 'ul',
  41     cls: 'my-list',
  42     // append children after creating
  43     children: [     // may also specify 'cn' instead of 'children'
  44         {tag: 'li', id: 'item0', html: 'List Item 0'},
  45         {tag: 'li', id: 'item1', html: 'List Item 1'},
  46         {tag: 'li', id: 'item2', html: 'List Item 2'}
  47     ]
  48 };
  49 var list = dh.append(
  50     'my-div', // the context element 'my-div' can either be the id or the actual node
  51     spec      // the specification object
  52 );
  53  &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
  54  * &lt;p&gt;Element creation specification parameters in this class may also be passed as an Array of
  55  * specification objects. This can be used to insert multiple sibling nodes into an existing
  56  * container very efficiently. For example, to add more list items to the example above:&lt;pre&gt;&lt;code&gt;
  57 dh.append('my-ul', [
  58     {tag: 'li', id: 'item3', html: 'List Item 3'},
  59     {tag: 'li', id: 'item4', html: 'List Item 4'}
  60 ]);
  61  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
  62  *
  63  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Templating&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
  64  * &lt;p&gt;The real power is in the built-in templating. Instead of creating or appending any elements,
  65  * &lt;tt&gt;{@link #createTemplate}&lt;/tt&gt; returns a Template object which can be used over and over to
  66  * insert new elements. Revisiting the example above, we could utilize templating this time:
  67  * &lt;pre&gt;&lt;code&gt;
  68 // create the node
  69 var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
  70 // get template
  71 var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
  72
  73 for(var i = 0; i &lt; 5, i++){
  74     tpl.append(list, [i]); // use template to append to the actual node
  75 }
  76  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
  77  * &lt;p&gt;An example using a template:&lt;pre&gt;&lt;code&gt;
  78 var html = '&lt;a id=&quot;{0}&quot; href=&quot;{1}&quot; class=&quot;nav&quot;&gt;{2}&lt;/a&gt;';
  79
  80 var tpl = new Ext.core.DomHelper.createTemplate(html);
  81 tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', &quot;Ed&amp;#39;s Site&quot;]);
  82 tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', &quot;Dustin&amp;#39;s Site&quot;]);
  83  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
  84  *
  85  * &lt;p&gt;The same example using named parameters:&lt;pre&gt;&lt;code&gt;
  86 var html = '&lt;a id=&quot;{id}&quot; href=&quot;{url}&quot; class=&quot;nav&quot;&gt;{text}&lt;/a&gt;';
  87
  88 var tpl = new Ext.core.DomHelper.createTemplate(html);
  89 tpl.append('blog-roll', {
  90     id: 'link1',
  91     url: 'http://www.edspencer.net/',
  92     text: &quot;Ed&amp;#39;s Site&quot;
  93 });
  94 tpl.append('blog-roll', {
  95     id: 'link2',
  96     url: 'http://www.dustindiaz.com/',
  97     text: &quot;Dustin&amp;#39;s Site&quot;
  98 });
  99  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
 100  *
 101  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Compiling Templates&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
 102  * &lt;p&gt;Templates are applied using regular expressions. The performance is great, but if
 103  * you are adding a bunch of DOM elements using the same template, you can increase
 104  * performance even further by {@link Ext.Template#compile &quot;compiling&quot;} the template.
 105  * The way &quot;{@link Ext.Template#compile compile()}&quot; works is the template is parsed and
 106  * broken up at the different variable points and a dynamic function is created and eval'ed.
 107  * The generated function performs string concatenation of these parts and the passed
 108  * variables instead of using regular expressions.
 109  * &lt;pre&gt;&lt;code&gt;
 110 var html = '&lt;a id=&quot;{id}&quot; href=&quot;{url}&quot; class=&quot;nav&quot;&gt;{text}&lt;/a&gt;';
 111
 112 var tpl = new Ext.core.DomHelper.createTemplate(html);
 113 tpl.compile();
 114
 115 //... use template like normal
 116  * &lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
 117  *
 118  * &lt;p&gt;&lt;b&gt;&lt;u&gt;Performance Boost&lt;/u&gt;&lt;/b&gt;&lt;/p&gt;
 119  * &lt;p&gt;DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
 120  * of DOM can significantly boost performance.&lt;/p&gt;
 121  * &lt;p&gt;Element creation specification parameters may also be strings. If {@link #useDom} is &lt;tt&gt;false&lt;/tt&gt;,
 122  * then the string is used as innerHTML. If {@link #useDom} is &lt;tt&gt;true&lt;/tt&gt;, a string specification
 123  * results in the creation of a text node. Usage:&lt;/p&gt;
 124  * &lt;pre&gt;&lt;code&gt;
 125 Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
 126  * &lt;/code&gt;&lt;/pre&gt;
 127  * @singleton
 128  */
 129 Ext.ns('Ext.core');
 130 Ext.core.DomHelper = function(){
 131     var tempTableEl = null,
 132         emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,
 133         tableRe = /^table|tbody|tr|td$/i,
 134         confRe = /tag|children|cn|html$/i,
 135         tableElRe = /td|tr|tbody/i,
 136         endRe = /end/i,
 137         pub,
 138         // kill repeat to save bytes
 139         afterbegin = 'afterbegin',
 140         afterend = 'afterend',
 141         beforebegin = 'beforebegin',
 142         beforeend = 'beforeend',
 143         ts = '&lt;table&gt;',
 144         te = '&lt;/table&gt;',
 145         tbs = ts+'&lt;tbody&gt;',
 146         tbe = '&lt;/tbody&gt;'+te,
 147         trs = tbs + '&lt;tr&gt;',
 148         tre = '&lt;/tr&gt;'+tbe;
 149
 150     // private
 151     function doInsert(el, o, returnElement, pos, sibling, append){
 152         el = Ext.getDom(el);
 153         var newNode;
 154         if (pub.useDom) {
 155             newNode = createDom(o, null);
 156             if (append) {
 157                 el.appendChild(newNode);
 158             } else {
 159                 (sibling == 'firstChild' ? el : el.parentNode).insertBefore(newNode, el[sibling] || el);
 160             }
 161         } else {
 162             newNode = Ext.core.DomHelper.insertHtml(pos, el, Ext.core.DomHelper.createHtml(o));
 163         }
 164         return returnElement ? Ext.get(newNode, true) : newNode;
 165     }
 166
 167     function createDom(o, parentNode){
 168         var el,
 169             doc = document,
 170             useSet,
 171             attr,
 172             val,
 173             cn;
 174
 175         if (Ext.isArray(o)) {                       // Allow Arrays of siblings to be inserted
 176             el = doc.createDocumentFragment(); // in one shot using a DocumentFragment
 177             for (var i = 0, l = o.length; i &lt; l; i++) {
 178                 createDom(o[i], el);
 179             }
 180         } else if (typeof o == 'string') {         // Allow a string as a child spec.
 181             el = doc.createTextNode(o);
 182         } else {
 183             el = doc.createElement( o.tag || 'div' );
 184             useSet = !!el.setAttribute; // In IE some elements don't have setAttribute
 185             for (attr in o) {
 186                 if(!confRe.test(attr)){
 187                     val = o[attr];
 188                     if(attr == 'cls'){
 189                         el.className = val;
 190                     }else{
 191                         if(useSet){
 192                             el.setAttribute(attr, val);
 193                         }else{
 194                             el[attr] = val;
 195                         }
 196                     }
 197                 }
 198             }
 199             Ext.core.DomHelper.applyStyles(el, o.style);
 200
 201             if ((cn = o.children || o.cn)) {
 202                 createDom(cn, el);
 203             } else if (o.html) {
 204                 el.innerHTML = o.html;
 205             }
 206         }
 207         if(parentNode){
 208            parentNode.appendChild(el);
 209         }
 210         return el;
 211     }
 212
 213     // build as innerHTML where available
 214     function createHtml(o){
 215         var b = '',
 216             attr,
 217             val,
 218             key,
 219             cn,
 220             i;
 221
 222         if(typeof o == &quot;string&quot;){
 223             b = o;
 224         } else if (Ext.isArray(o)) {
 225             for (i=0; i &lt; o.length; i++) {
 226                 if(o[i]) {
 227                     b += createHtml(o[i]);
 228                 }
 229             }
 230         } else {
 231             b += '&lt;' + (o.tag = o.tag || 'div');
 232             for (attr in o) {
 233                 val = o[attr];
 234                 if(!confRe.test(attr)){
 235                     if (typeof val == &quot;object&quot;) {
 236                         b += ' ' + attr + '=&quot;';
 237                         for (key in val) {
 238                             b += key + ':' + val[key] + ';';
 239                         }
 240                         b += '&quot;';
 241                     }else{
 242                         b += ' ' + ({cls : 'class', htmlFor : 'for'}[attr] || attr) + '=&quot;' + val + '&quot;';
 243                     }
 244                 }
 245             }
 246             // Now either just close the tag or try to add children and close the tag.
 247             if (emptyTags.test(o.tag)) {
 248                 b += '/&gt;';
 249             } else {
 250                 b += '&gt;';
 251                 if ((cn = o.children || o.cn)) {
 252                     b += createHtml(cn);
 253                 } else if(o.html){
 254                     b += o.html;
 255                 }
 256                 b += '&lt;/' + o.tag + '&gt;';
 257             }
 258         }
 259         return b;
 260     }
 261
 262     function ieTable(depth, s, h, e){
 263         tempTableEl.innerHTML = [s, h, e].join('');
 264         var i = -1,
 265             el = tempTableEl,
 266             ns;
 267         while(++i &lt; depth){
 268             el = el.firstChild;
 269         }
 270 //      If the result is multiple siblings, then encapsulate them into one fragment.
 271         ns = el.nextSibling;
 272         if (ns){
 273             var df = document.createDocumentFragment();
 274             while(el){
 275                 ns = el.nextSibling;
 276                 df.appendChild(el);
 277                 el = ns;
 278             }
 279             el = df;
 280         }
 281         return el;
 282     }
 283
 284 <span id='Ext-core.DomHelper-method-insertIntoTable'>    /**
 285 </span>     * @ignore
 286      * Nasty code for IE's broken table implementation
 287      */
 288     function insertIntoTable(tag, where, el, html) {
 289         var node,
 290             before;
 291
 292         tempTableEl = tempTableEl || document.createElement('div');
 293
 294         if(tag == 'td' &amp;&amp; (where == afterbegin || where == beforeend) ||
 295            !tableElRe.test(tag) &amp;&amp; (where == beforebegin || where == afterend)) {
 296             return null;
 297         }
 298         before = where == beforebegin ? el :
 299                  where == afterend ? el.nextSibling :
 300                  where == afterbegin ? el.firstChild : null;
 301
 302         if (where == beforebegin || where == afterend) {
 303             el = el.parentNode;
 304         }
 305
 306         if (tag == 'td' || (tag == 'tr' &amp;&amp; (where == beforeend || where == afterbegin))) {
 307             node = ieTable(4, trs, html, tre);
 308         } else if ((tag == 'tbody' &amp;&amp; (where == beforeend || where == afterbegin)) ||
 309                    (tag == 'tr' &amp;&amp; (where == beforebegin || where == afterend))) {
 310             node = ieTable(3, tbs, html, tbe);
 311         } else {
 312             node = ieTable(2, ts, html, te);
 313         }
 314         el.insertBefore(node, before);
 315         return node;
 316     }
 317
 318 <span id='Ext-core.DomHelper-method-createContextualFragment'>    /**
 319 </span>     * @ignore
 320      * Fix for IE9 createContextualFragment missing method
 321      */
 322     function createContextualFragment(html){
 323         var div = document.createElement(&quot;div&quot;),
 324             fragment = document.createDocumentFragment(),
 325             i = 0,
 326             length, childNodes;
 327
 328         div.innerHTML = html;
 329         childNodes = div.childNodes;
 330         length = childNodes.length;
 331
 332         for (; i &lt; length; i++) {
 333             fragment.appendChild(childNodes[i].cloneNode(true));
 334         }
 335
 336         return fragment;
 337     }
 338
 339     pub = {
 340 <span id='Ext-core.DomHelper-method-markup'>        /**
 341 </span>         * Returns the markup for the passed Element(s) config.
 342          * @param {Object} o The DOM object spec (and children)
 343          * @return {String}
 344          */
 345         markup : function(o){
 346             return createHtml(o);
 347         },
 348
 349 <span id='Ext-core.DomHelper-method-applyStyles'>        /**
 350 </span>         * Applies a style specification to an element.
 351          * @param {String/HTMLElement} el The element to apply styles to
 352          * @param {String/Object/Function} styles A style specification string e.g. 'width:100px', or object in the form {width:'100px'}, or
 353          * a function which returns such a specification.
 354          */
 355         applyStyles : function(el, styles){
 356             if (styles) {
 357                 el = Ext.fly(el);
 358                 if (typeof styles == &quot;function&quot;) {
 359                     styles = styles.call();
 360                 }
 361                 if (typeof styles == &quot;string&quot;) {
 362                     styles = Ext.core.Element.parseStyles(styles);
 363                 }
 364                 if (typeof styles == &quot;object&quot;) {
 365                     el.setStyle(styles);
 366                 }
 367             }
 368         },
 369
 370 <span id='Ext-core.DomHelper-method-insertHtml'>        /**
 371 </span>         * Inserts an HTML fragment into the DOM.
 372          * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
 373          * @param {HTMLElement/TextNode} el The context element
 374          * @param {String} html The HTML fragment
 375          * @return {HTMLElement} The new node
 376          */
 377         insertHtml : function(where, el, html){
 378             var hash = {},
 379                 hashVal,
 380                 range,
 381                 rangeEl,
 382                 setStart,
 383                 frag,
 384                 rs;
 385
 386             where = where.toLowerCase();
 387             // add these here because they are used in both branches of the condition.
 388             hash[beforebegin] = ['BeforeBegin', 'previousSibling'];
 389             hash[afterend] = ['AfterEnd', 'nextSibling'];
 390
 391             // if IE and context element is an HTMLElement
 392             if (el.insertAdjacentHTML) {
 393                 if(tableRe.test(el.tagName) &amp;&amp; (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
 394                     return rs;
 395                 }
 396
 397                 // add these two to the hash.
 398                 hash[afterbegin] = ['AfterBegin', 'firstChild'];
 399                 hash[beforeend] = ['BeforeEnd', 'lastChild'];
 400                 if ((hashVal = hash[where])) {
 401                     el.insertAdjacentHTML(hashVal[0], html);
 402                     return el[hashVal[1]];
 403                 }
 404             // if (not IE and context element is an HTMLElement) or TextNode
 405             } else {
 406                 // we cannot insert anything inside a textnode so...
 407                 if (Ext.isTextNode(el)) {
 408                     where = where === 'afterbegin' ? 'beforebegin' : where;
 409                     where = where === 'beforeend' ? 'afterend' : where;
 410                 }
 411                 range = Ext.supports.CreateContextualFragment ? el.ownerDocument.createRange() : undefined;
 412                 setStart = 'setStart' + (endRe.test(where) ? 'After' : 'Before');
 413                 if (hash[where]) {
 414                     if (range) {
 415                         range[setStart](el);
 416                         frag = range.createContextualFragment(html);
 417                     } else {
 418                         frag = createContextualFragment(html);
 419                     }
 420                     el.parentNode.insertBefore(frag, where == beforebegin ? el : el.nextSibling);
 421                     return el[(where == beforebegin ? 'previous' : 'next') + 'Sibling'];
 422                 } else {
 423                     rangeEl = (where == afterbegin ? 'first' : 'last') + 'Child';
 424                     if (el.firstChild) {
 425                         if (range) {
 426                             range[setStart](el[rangeEl]);
 427                             frag = range.createContextualFragment(html);
 428                         } else {
 429                             frag = createContextualFragment(html);
 430                         }
 431
 432                         if(where == afterbegin){
 433                             el.insertBefore(frag, el.firstChild);
 434                         }else{
 435                             el.appendChild(frag);
 436                         }
 437                     } else {
 438                         el.innerHTML = html;
 439                     }
 440                     return el[rangeEl];
 441                 }
 442             }
 443             //&lt;debug&gt;
 444             Ext.Error.raise({
 445                 sourceClass: 'Ext.core.DomHelper',
 446                 sourceMethod: 'insertHtml',
 447                 htmlToInsert: html,
 448                 targetElement: el,
 449                 msg: 'Illegal insertion point reached: &quot;' + where + '&quot;'
 450             });
 451             //&lt;/debug&gt;
 452         },
 453
 454 <span id='Ext-core.DomHelper-method-insertBefore'>        /**
 455 </span>         * Creates new DOM element(s) and inserts them before el.
 456          * @param {Mixed} el The context element
 457          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
 458          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
 459          * @return {HTMLElement/Ext.core.Element} The new node
 460          */
 461         insertBefore : function(el, o, returnElement){
 462             return doInsert(el, o, returnElement, beforebegin);
 463         },
 464
 465 <span id='Ext-core.DomHelper-method-insertAfter'>        /**
 466 </span>         * Creates new DOM element(s) and inserts them after el.
 467          * @param {Mixed} el The context element
 468          * @param {Object} o The DOM object spec (and children)
 469          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
 470          * @return {HTMLElement/Ext.core.Element} The new node
 471          */
 472         insertAfter : function(el, o, returnElement){
 473             return doInsert(el, o, returnElement, afterend, 'nextSibling');
 474         },
 475
 476 <span id='Ext-core.DomHelper-method-insertFirst'>        /**
 477 </span>         * Creates new DOM element(s) and inserts them as the first child of el.
 478          * @param {Mixed} el The context element
 479          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
 480          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
 481          * @return {HTMLElement/Ext.core.Element} The new node
 482          */
 483         insertFirst : function(el, o, returnElement){
 484             return doInsert(el, o, returnElement, afterbegin, 'firstChild');
 485         },
 486
 487 <span id='Ext-core.DomHelper-method-append'>        /**
 488 </span>         * Creates new DOM element(s) and appends them to el.
 489          * @param {Mixed} el The context element
 490          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
 491          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
 492          * @return {HTMLElement/Ext.core.Element} The new node
 493          */
 494         append : function(el, o, returnElement){
 495             return doInsert(el, o, returnElement, beforeend, '', true);
 496         },
 497
 498 <span id='Ext-core.DomHelper-method-overwrite'>        /**
 499 </span>         * Creates new DOM element(s) and overwrites the contents of el with them.
 500          * @param {Mixed} el The context element
 501          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
 502          * @param {Boolean} returnElement (optional) true to return a Ext.core.Element
 503          * @return {HTMLElement/Ext.core.Element} The new node
 504          */
 505         overwrite : function(el, o, returnElement){
 506             el = Ext.getDom(el);
 507             el.innerHTML = createHtml(o);
 508             return returnElement ? Ext.get(el.firstChild) : el.firstChild;
 509         },
 510
 511         createHtml : createHtml,
 512
 513 <span id='Ext-core.DomHelper-property-createDom'>        /**
 514 </span>         * Creates new DOM element(s) without inserting them to the document.
 515          * @param {Object/String} o The DOM object spec (and children) or raw HTML blob
 516          * @return {HTMLElement} The new uninserted node
 517          */
 518         createDom: createDom,
 519
 520 <span id='Ext-core.DomHelper-property-useDom'>        /** True to force the use of DOM instead of html fragments @type Boolean */
 521 </span>        useDom : false,
 522
 523 <span id='Ext-core.DomHelper-method-createTemplate'>        /**
 524 </span>         * Creates a new Ext.Template from the DOM object spec.
 525          * @param {Object} o The DOM object spec (and children)
 526          * @return {Ext.Template} The new template
 527          */
 528         createTemplate : function(o){
 529             var html = Ext.core.DomHelper.createHtml(o);
 530             return Ext.create('Ext.Template', html);
 531         }
 532     };
 533     return pub;
 534 }();
 535 </pre></pre></body></html>