git.roojs.org Git - roojs1/blob - docs/src/Roo_DomHelper.js.html

   1 <html><head><title>Roo/DomHelper.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * &lt;script type=&quot;text/javascript&quot;&gt;
  10  */
  11
  12
  13 // nasty IE9 hack - what a pile of crap that is..
  14
  15  </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">Range </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">&quot;undefined&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">Range.prototype.createContextualFragment </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;undefined&quot;</span><span class="jsdoc-syntax">) {
  16     </span><span class="jsdoc-var">Range.prototype.createContextualFragment </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">) {
  17         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">window.document</span><span class="jsdoc-syntax">;
  18         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">);
  19         </span><span class="jsdoc-var">container.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
  20         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createDocumentFragment</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
  21         </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">container.firstChild</span><span class="jsdoc-syntax">)) {
  22             </span><span class="jsdoc-var">frag.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">);
  23         }
  24         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">;
  25     };
  26 }
  27
  28 </span><span class="jsdoc-comment">/**
  29  * @class Roo.DomHelper
  30  * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
  31  * For more information see &lt;a href=&quot;http://web.archive.org/web/20071221063734/http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/&quot;&gt;this blog post with examples&lt;/a&gt;.
  32  * @static
  33  */
  34 </span><span class="jsdoc-var">Roo.DomHelper </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  35     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tempTableEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
  36     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">emptyTags </span><span class="jsdoc-syntax">= /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
  37     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tableRe </span><span class="jsdoc-syntax">= /^table|tbody|tr|td$/i;
  38     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xmlns </span><span class="jsdoc-syntax">= {};
  39     </span><span class="jsdoc-comment">// build as innerHTML where available
  40     /** @ignore */
  41     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">createHtml </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
  42         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">){
  43             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">;
  44         }
  45         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
  46         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">){
  47             </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;div&quot;</span><span class="jsdoc-syntax">;
  48         }
  49         </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;&lt;&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">;
  50         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">attr </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
  51             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;tag&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;children&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;cn&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;html&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">; }
  52             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;style&quot;</span><span class="jsdoc-syntax">){
  53                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;style&quot;</span><span class="jsdoc-syntax">];
  54                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
  55                     </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s.call</span><span class="jsdoc-syntax">();
  56                 }
  57                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
  58                     </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' style=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
  59                 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
  60                     </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' style=&quot;'</span><span class="jsdoc-syntax">;
  61                     </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">key </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">){
  62                         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] != </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
  63                             </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">key </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;:&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">key</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">&quot;;&quot;</span><span class="jsdoc-syntax">;
  64                         }
  65                     }
  66                     </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
  67                 }
  68             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  69                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">){
  70                     </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' class=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
  71                 }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;htmlFor&quot;</span><span class="jsdoc-syntax">){
  72                     </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' for=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;htmlFor&quot;</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
  73                 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  74                     </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot; &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] + </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
  75                 }
  76             }
  77         }
  78         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">emptyTags.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">)){
  79             </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;/&gt;&quot;</span><span class="jsdoc-syntax">;
  80         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  81             </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;&gt;&quot;</span><span class="jsdoc-syntax">;
  82             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.children </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.cn</span><span class="jsdoc-syntax">;
  83             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">){
  84                 </span><span class="jsdoc-comment">//http://bugs.kde.org/show_bug.cgi?id=71506
  85                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">cn </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn.join</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">)){
  86                     </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
  87                         </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
  88                     }
  89                 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  90                     </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
  91                 }
  92             }
  93             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">){
  94                 </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">;
  95             }
  96             </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;&lt;/&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;&gt;&quot;</span><span class="jsdoc-syntax">;
  97         }
  98         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">;
  99     };
 100
 101     </span><span class="jsdoc-comment">// build as dom
 102     /** @ignore */
 103     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">createDom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">parentNode</span><span class="jsdoc-syntax">){
 104
 105         </span><span class="jsdoc-comment">// defininition craeted..
 106         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 107         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">) {
 108
 109             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.xmlns </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 110                 </span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">o.xmlns</span><span class="jsdoc-syntax">;
 111                 </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.xmlns</span><span class="jsdoc-syntax">;
 112             }
 113             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">]) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
 114                 </span><span class="jsdoc-var">console.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Trying to create namespace element &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;, however no xmlns was sent to builder previously&quot;</span><span class="jsdoc-syntax">);
 115             }
 116             </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">xmlns</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">];
 117         }
 118
 119
 120         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
 121             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">parentNode.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createTextNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">));
 122         }
 123         </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">;
 124         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">) {
 125             </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 126             </span><span class="jsdoc-var">o.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.ns </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">':' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">;
 127
 128         }
 129         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">document.createElementNS</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">) :  </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.tag</span><span class="jsdoc-syntax">||</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">);
 130         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">useSet </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.setAttribute </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">true </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// In IE some elements don't have setAttribute
 131         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">attr </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
 132
 133             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;tag&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;ns&quot; </span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;xmlns&quot; </span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;children&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;cn&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;html&quot; </span><span class="jsdoc-syntax">||
 134                     </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;style&quot; </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">; }
 135
 136             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;cls&quot; </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
 137                 </span><span class="jsdoc-var">el.className </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-string">&quot;cls&quot;</span><span class="jsdoc-syntax">];
 138             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 139                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">useSet</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-var">el.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">==</span><span class="jsdoc-string">&quot;cls&quot; </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'class' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">]);}
 140                 </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 141                     </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">];
 142                 }
 143             }
 144         }
 145         </span><span class="jsdoc-var">Roo.DomHelper.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.style</span><span class="jsdoc-syntax">);
 146         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.children </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.cn</span><span class="jsdoc-syntax">;
 147         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">){
 148             </span><span class="jsdoc-comment">//http://bugs.kde.org/show_bug.cgi?id=71506
 149              </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">cn </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn.join</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">)){
 150                 </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0, </span><span class="jsdoc-var">len </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">len</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 151                     </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 152                 }
 153             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 154                 </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 155             }
 156         }
 157         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">){
 158             </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.html</span><span class="jsdoc-syntax">;
 159         }
 160         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">parentNode</span><span class="jsdoc-syntax">){
 161            </span><span class="jsdoc-var">parentNode.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 162         }
 163         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 164     };
 165
 166     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ieTable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">depth</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
 167         </span><span class="jsdoc-var">tempTableEl.innerHTML </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
 168         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= -1, </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tempTableEl</span><span class="jsdoc-syntax">;
 169         </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(++</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">depth </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">){
 170             </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 171         }
 172         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 173     };
 174
 175     </span><span class="jsdoc-comment">// kill repeat to save bytes
 176     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;table&gt;'</span><span class="jsdoc-syntax">,
 177         </span><span class="jsdoc-var">te </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;/table&gt;'</span><span class="jsdoc-syntax">,
 178         </span><span class="jsdoc-var">tbs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">'&lt;tbody&gt;'</span><span class="jsdoc-syntax">,
 179         </span><span class="jsdoc-var">tbe </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;/tbody&gt;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">,
 180         </span><span class="jsdoc-var">trs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tbs </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&lt;tr&gt;'</span><span class="jsdoc-syntax">,
 181         </span><span class="jsdoc-var">tre </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&lt;/tr&gt;'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">;
 182
 183     </span><span class="jsdoc-comment">/**
 184      * @ignore
 185      * Nasty code for IE's broken table implementation
 186      */
 187     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">insertIntoTable </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">){
 188         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">tempTableEl</span><span class="jsdoc-syntax">){
 189             </span><span class="jsdoc-var">tempTableEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">);
 190         }
 191         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">;
 192         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
 193         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'td'</span><span class="jsdoc-syntax">){
 194             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforeend'</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// INTO a TD
 195                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 196             }
 197             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin'</span><span class="jsdoc-syntax">){
 198                 </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 199                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
 200             } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 201                 </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
 202                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
 203             }
 204             </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(4, </span><span class="jsdoc-var">trs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tre</span><span class="jsdoc-syntax">);
 205         }
 206         </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">){
 207             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin'</span><span class="jsdoc-syntax">){
 208                 </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 209                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
 210                 </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(3, </span><span class="jsdoc-var">tbs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">);
 211             } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterend'</span><span class="jsdoc-syntax">){
 212                 </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
 213                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
 214                 </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(3, </span><span class="jsdoc-var">tbs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">);
 215             } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{ </span><span class="jsdoc-comment">// INTO a TR
 216                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin'</span><span class="jsdoc-syntax">){
 217                     </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 218                 }
 219                 </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(4, </span><span class="jsdoc-var">trs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tre</span><span class="jsdoc-syntax">);
 220             }
 221         } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'tbody'</span><span class="jsdoc-syntax">){
 222             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin'</span><span class="jsdoc-syntax">){
 223                 </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">;
 224                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
 225                 </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(2, </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">);
 226             } </span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterend'</span><span class="jsdoc-syntax">){
 227                 </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
 228                 </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.parentNode</span><span class="jsdoc-syntax">;
 229                 </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(2, </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">);
 230             } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 231                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin'</span><span class="jsdoc-syntax">){
 232                     </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 233                 }
 234                 </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(3, </span><span class="jsdoc-var">tbs</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tbe</span><span class="jsdoc-syntax">);
 235             }
 236         } </span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{ </span><span class="jsdoc-comment">// TABLE
 237             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'beforebegin' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterend'</span><span class="jsdoc-syntax">){ </span><span class="jsdoc-comment">// OUTSIDE the table
 238                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 239             }
 240             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'afterbegin'</span><span class="jsdoc-syntax">){
 241                 </span><span class="jsdoc-var">before </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 242             }
 243             </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ieTable</span><span class="jsdoc-syntax">(2, </span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">te</span><span class="jsdoc-syntax">);
 244         }
 245         </span><span class="jsdoc-var">el.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">before</span><span class="jsdoc-syntax">);
 246         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">;
 247     };
 248
 249     </span><span class="jsdoc-comment">// this is a bit like the react update code...
 250     //
 251
 252     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">updateNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">)
 253     {
 254         </span><span class="jsdoc-comment">// should we handle non-standard elements?
 255
 256         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.nodeType </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">to.nodeType</span><span class="jsdoc-syntax">) {
 257             </span><span class="jsdoc-var">from.parentNode.replaceChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">);
 258         }
 259
 260         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.nodeType </span><span class="jsdoc-syntax">== 3) {
 261             </span><span class="jsdoc-comment">// assume it's text?!
 262             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.data </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">to.data</span><span class="jsdoc-syntax">) {
 263                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 264             }
 265             </span><span class="jsdoc-var">from.data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">to.data</span><span class="jsdoc-syntax">;
 266             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 267         }
 268
 269         </span><span class="jsdoc-comment">// assume 'to' doesnt have '1/3 nodetypes!
 270         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.nodeType </span><span class="jsdoc-syntax">!=1 || </span><span class="jsdoc-var">from.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">to.tagName</span><span class="jsdoc-syntax">) {
 271             </span><span class="jsdoc-var">from.parentNode.replaceChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">);
 272             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 273         }
 274         </span><span class="jsdoc-comment">// compare attributes
 275         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.attributes</span><span class="jsdoc-syntax">);
 276         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">ar.length</span><span class="jsdoc-syntax">;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 277             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.name</span><span class="jsdoc-syntax">)) {
 278                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 279             }
 280             </span><span class="jsdoc-var">from.removeAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.name</span><span class="jsdoc-syntax">);
 281         }
 282         </span><span class="jsdoc-var">ar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">to.attributes</span><span class="jsdoc-syntax">;
 283         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">ar.length</span><span class="jsdoc-syntax">;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 284             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.name</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-var">to.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.name</span><span class="jsdoc-syntax">)) {
 285                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 286             }
 287             </span><span class="jsdoc-var">from.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.name</span><span class="jsdoc-syntax">));
 288         }
 289         </span><span class="jsdoc-comment">// children
 290         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">far </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.childNodes</span><span class="jsdoc-syntax">);
 291         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to.childNodes</span><span class="jsdoc-syntax">);
 292         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far.length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tar.length</span><span class="jsdoc-syntax">); </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 293             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">far.length </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">tar.length</span><span class="jsdoc-syntax">) {
 294                 </span><span class="jsdoc-var">updateNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">tar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 295                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 296             }
 297             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">far.length</span><span class="jsdoc-syntax">) {
 298                 </span><span class="jsdoc-comment">// have from // but no 'to'
 299                 </span><span class="jsdoc-var">from.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">far</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 300                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 301             }
 302             </span><span class="jsdoc-var">from.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]);
 303             </span><span class="jsdoc-comment">// have 'to' but no from
 304         </span><span class="jsdoc-syntax">}
 305
 306
 307     };
 308
 309
 310
 311     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 312         </span><span class="jsdoc-comment">/** True to force the use of DOM instead of html fragments @type Boolean */
 313         </span><span class="jsdoc-var">useDom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 314
 315         </span><span class="jsdoc-comment">/**
 316          * Returns the markup for the passed Element(s) config
 317          * @param {Object} o The Dom object spec (and children)
 318          * @return {String}
 319          */
 320         </span><span class="jsdoc-var">markup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
 321             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
 322         },
 323
 324         </span><span class="jsdoc-comment">/**
 325          * Applies a style specification to an element
 326          * @param {String/HTMLElement} el The element to apply styles to
 327          * @param {String/Object/Function} styles A style specification string eg &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
 328          * a function which returns such a specification.
 329          */
 330         </span><span class="jsdoc-var">applyStyles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
 331             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
 332                </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 333                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">styles </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;string&quot;</span><span class="jsdoc-syntax">){
 334                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
 335                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">matches</span><span class="jsdoc-syntax">;
 336                    </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">matches </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">re.exec</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">)) != </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">){
 337                        </span><span class="jsdoc-var">el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">matches</span><span class="jsdoc-syntax">[1], </span><span class="jsdoc-var">matches</span><span class="jsdoc-syntax">[2]);
 338                    }
 339                }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">styles </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;object&quot;</span><span class="jsdoc-syntax">){
 340                    </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">style </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
 341                       </span><span class="jsdoc-var">el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">]);
 342                    }
 343                }</span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof </span><span class="jsdoc-var">styles </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">&quot;function&quot;</span><span class="jsdoc-syntax">){
 344                     </span><span class="jsdoc-var">Roo.DomHelper.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">styles.call</span><span class="jsdoc-syntax">());
 345                }
 346             }
 347         },
 348
 349         </span><span class="jsdoc-comment">/**
 350          * Inserts an HTML fragment into the Dom
 351          * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
 352          * @param {HTMLElement} el The context element
 353          * @param {String} html The HTML fragmenet
 354          * @return {HTMLElement} The new node
 355          */
 356         </span><span class="jsdoc-var">insertHtml </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">){
 357             </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">where.toLowerCase</span><span class="jsdoc-syntax">();
 358             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">){
 359                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tableRe.test</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.tagName</span><span class="jsdoc-syntax">)){
 360                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">;
 361                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">rs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">insertIntoTable</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.tagName.toLowerCase</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">)){
 362                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">;
 363                     }
 364                 }
 365                 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">){
 366                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforebegin&quot;</span><span class="jsdoc-syntax">:
 367                         </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'BeforeBegin'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 368                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.previousSibling</span><span class="jsdoc-syntax">;
 369                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterbegin&quot;</span><span class="jsdoc-syntax">:
 370                         </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'AfterBegin'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 371                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 372                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforeend&quot;</span><span class="jsdoc-syntax">:
 373                         </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'BeforeEnd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 374                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
 375                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterend&quot;</span><span class="jsdoc-syntax">:
 376                         </span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'AfterEnd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 377                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
 378                 }
 379                 </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">'Illegal insertion point -&gt; &quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
 380             }
 381             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.ownerDocument.createRange</span><span class="jsdoc-syntax">();
 382             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">;
 383             </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">){
 384                  </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforebegin&quot;</span><span class="jsdoc-syntax">:
 385                     </span><span class="jsdoc-var">range.setStartBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 386                     </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 387                     </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 388                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.previousSibling</span><span class="jsdoc-syntax">;
 389                  </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterbegin&quot;</span><span class="jsdoc-syntax">:
 390                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">){
 391                         </span><span class="jsdoc-var">range.setStartBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
 392                         </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 393                         </span><span class="jsdoc-var">el.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
 394                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 395                     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 396                         </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
 397                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 398                     }
 399                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforeend&quot;</span><span class="jsdoc-syntax">:
 400                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">){
 401                         </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">);
 402                         </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 403                         </span><span class="jsdoc-var">el.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">);
 404                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
 405                     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 406                         </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
 407                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
 408                     }
 409                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterend&quot;</span><span class="jsdoc-syntax">:
 410                     </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 411                     </span><span class="jsdoc-var">frag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.createContextualFragment</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 412                     </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">);
 413                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
 414                 }
 415                 </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-string">'Illegal insertion point -&gt; &quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;'</span><span class="jsdoc-syntax">;
 416         },
 417
 418         </span><span class="jsdoc-comment">/**
 419          * Creates new Dom element(s) and inserts them before el
 420          * @param {String/HTMLElement/Element} el The context element
 421          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 422          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 423          * @return {HTMLElement/Roo.Element} The new node
 424          */
 425         </span><span class="jsdoc-var">insertBefore </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 426             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;beforeBegin&quot;</span><span class="jsdoc-syntax">);
 427         },
 428
 429         </span><span class="jsdoc-comment">/**
 430          * Creates new Dom element(s) and inserts them after el
 431          * @param {String/HTMLElement/Element} el The context element
 432          * @param {Object} o The Dom object spec (and children)
 433          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 434          * @return {HTMLElement/Roo.Element} The new node
 435          */
 436         </span><span class="jsdoc-var">insertAfter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 437             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;afterEnd&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;nextSibling&quot;</span><span class="jsdoc-syntax">);
 438         },
 439
 440         </span><span class="jsdoc-comment">/**
 441          * Creates new Dom element(s) and inserts them as the first child of el
 442          * @param {String/HTMLElement/Element} el The context element
 443          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 444          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 445          * @return {HTMLElement/Roo.Element} The new node
 446          */
 447         </span><span class="jsdoc-var">insertFirst </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 448             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;afterBegin&quot;</span><span class="jsdoc-syntax">);
 449         },
 450
 451         </span><span class="jsdoc-comment">// private
 452         </span><span class="jsdoc-var">doInsert </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sibling</span><span class="jsdoc-syntax">){
 453             </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 454             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
 455             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useDom </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">){
 456                 </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
 457                 </span><span class="jsdoc-var">el.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sibling </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sibling</span><span class="jsdoc-syntax">] : </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 458             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 459                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
 460                 </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.insertHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 461             }
 462             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnElement </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
 463         },
 464
 465         </span><span class="jsdoc-comment">/**
 466          * Creates new Dom element(s) and appends them to el
 467          * @param {String/HTMLElement/Element} el The context element
 468          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 469          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 470          * @return {HTMLElement/Roo.Element} The new node
 471          */
 472         </span><span class="jsdoc-var">append </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 473             </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 474             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
 475             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.useDom </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">){
 476                 </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
 477                 </span><span class="jsdoc-var">el.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">);
 478             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 479                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
 480                 </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.insertHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;beforeEnd&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 481             }
 482             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnElement </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
 483         },
 484
 485         </span><span class="jsdoc-comment">/**
 486          * Creates new Dom element(s) and overwrites the contents of el with them
 487          * @param {String/HTMLElement/Element} el The context element
 488          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 489          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 490          * @return {HTMLElement/Roo.Element} The new node
 491          */
 492         </span><span class="jsdoc-var">overwrite </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">)
 493         {
 494             </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 495             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">) {
 496
 497                 </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.childNodes.length</span><span class="jsdoc-syntax">) {
 498                     </span><span class="jsdoc-var">el.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
 499                 }
 500                 </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 501             } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 502                 </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
 503             }
 504
 505             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnElement </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 506         },
 507
 508         </span><span class="jsdoc-comment">/**
 509          * Creates a new Roo.DomHelper.Template from the Dom object spec
 510          * @param {Object} o The Dom object spec (and children)
 511          * @return {Roo.DomHelper.Template} The new template
 512          */
 513         </span><span class="jsdoc-var">createTemplate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
 514             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">createHtml</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
 515             </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">);
 516         },
 517          </span><span class="jsdoc-comment">/**
 518          * Updates the first element with the spec from the o (replacing if necessary)
 519          * This iterates through the children, and updates attributes / children etc..
 520          * @param {String/HTMLElement/Element} el The context element
 521          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 522          */
 523
 524         </span><span class="jsdoc-var">update </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">)
 525         {
 526             </span><span class="jsdoc-var">updateNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.getDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">), </span><span class="jsdoc-var">createDom</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">));
 527
 528         }
 529
 530
 531     };
 532 }();
 533 </span></code></body></html>