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         </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">&quot;UpdateNode&quot; </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">]);
 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">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">&quot;ReplaceChild - mismatch notType&quot; </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             </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">);
 259         }
 260
 261         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.nodeType </span><span class="jsdoc-syntax">== 3) {
 262             </span><span class="jsdoc-comment">// assume it's text?!
 263             </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">) {
 264                 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 265             }
 266             </span><span class="jsdoc-var">from.data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">to.data</span><span class="jsdoc-syntax">;
 267             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 268         }
 269         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">from.parentNode</span><span class="jsdoc-syntax">) {
 270             </span><span class="jsdoc-comment">// not sure why this is happening?
 271             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 272         }
 273         </span><span class="jsdoc-comment">// assume 'to' doesnt have '1/3 nodetypes!
 274         // not sure why, by from, parent node might not exist?
 275         </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">) {
 276             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">&quot;ReplaceChild&quot; </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">]);
 277
 278             </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">);
 279             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 280         }
 281         </span><span class="jsdoc-comment">// compare attributes
 282         </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">);
 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">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">)) {
 285                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 286             }
 287             </span><span class="jsdoc-keyword">if </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-string">'id'</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-comment">// always keep ids?
 288                </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 289             }
 290             </span><span class="jsdoc-comment">//if (ar[i].name == 'style') {
 291             //   throw &quot;style removed?&quot;;
 292             //}
 293             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;removeAttribute&quot; </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">);
 294             </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">);
 295         }
 296         </span><span class="jsdoc-var">ar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">to.attributes</span><span class="jsdoc-syntax">;
 297         </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">++) {
 298             </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">)) {
 299                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;skipAttribute &quot; </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-string">'=' </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">));
 300                 </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
 301             }
 302             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;updateAttribute &quot; </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-string">'=&gt;' </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">));
 303             </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">));
 304         }
 305         </span><span class="jsdoc-comment">// children
 306         </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">);
 307         </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">);
 308         </span><span class="jsdoc-comment">// if the lengths are different.. then it's probably a editable content change, rather than
 309         // a change of the block definition..
 310
 311         // this did notwork , as our rebuilt nodes did not include ID's so did not match at all.
 312          /*if (from.innerHTML == to.innerHTML) {
 313             return;
 314         }
 315         if (far.length != tar.length) {
 316             from.innerHTML = to.innerHTML;
 317             return;
 318         }
 319         */
 320
 321         </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">tar.length</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">far.length</span><span class="jsdoc-syntax">); </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
 322             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">far.length</span><span class="jsdoc-syntax">) {
 323                 </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">]);
 324                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">&quot;add&quot;</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">]]);
 325
 326             } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">i  </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">tar.length</span><span class="jsdoc-syntax">) {
 327                 </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">]);
 328                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">&quot;remove&quot;</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">]]);
 329             } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 330
 331                 </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">]);
 332             }
 333         }
 334
 335
 336
 337
 338     };
 339
 340
 341
 342     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
 343         </span><span class="jsdoc-comment">/** True to force the use of DOM instead of html fragments @type Boolean */
 344         </span><span class="jsdoc-var">useDom </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 345
 346         </span><span class="jsdoc-comment">/**
 347          * Returns the markup for the passed Element(s) config
 348          * @param {Object} o The Dom object spec (and children)
 349          * @return {String}
 350          */
 351         </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">){
 352             </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">);
 353         },
 354
 355         </span><span class="jsdoc-comment">/**
 356          * Applies a style specification to an element
 357          * @param {String/HTMLElement} el The element to apply styles to
 358          * @param {String/Object/Function} styles A style specification string eg &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
 359          * a function which returns such a specification.
 360          */
 361         </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">){
 362             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">styles</span><span class="jsdoc-syntax">){
 363                </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">);
 364                </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">){
 365                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
 366                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">matches</span><span class="jsdoc-syntax">;
 367                    </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">){
 368                        </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]);
 369                    }
 370                }</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">){
 371                    </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">){
 372                       </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">]);
 373                    }
 374                }</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">){
 375                     </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">());
 376                }
 377             }
 378         },
 379
 380         </span><span class="jsdoc-comment">/**
 381          * Inserts an HTML fragment into the Dom
 382          * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
 383          * @param {HTMLElement} el The context element
 384          * @param {String} html The HTML fragmenet
 385          * @return {HTMLElement} The new node
 386          */
 387         </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">){
 388             </span><span class="jsdoc-var">where </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">where.toLowerCase</span><span class="jsdoc-syntax">();
 389             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.insertAdjacentHTML</span><span class="jsdoc-syntax">){
 390                 </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">)){
 391                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">;
 392                     </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">)){
 393                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">rs</span><span class="jsdoc-syntax">;
 394                     }
 395                 }
 396                 </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">){
 397                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforebegin&quot;</span><span class="jsdoc-syntax">:
 398                         </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">);
 399                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.previousSibling</span><span class="jsdoc-syntax">;
 400                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterbegin&quot;</span><span class="jsdoc-syntax">:
 401                         </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">);
 402                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 403                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforeend&quot;</span><span class="jsdoc-syntax">:
 404                         </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">);
 405                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
 406                     </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterend&quot;</span><span class="jsdoc-syntax">:
 407                         </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">);
 408                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
 409                 }
 410                 </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">;
 411             }
 412             </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">();
 413             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">;
 414             </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">where</span><span class="jsdoc-syntax">){
 415                  </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforebegin&quot;</span><span class="jsdoc-syntax">:
 416                     </span><span class="jsdoc-var">range.setStartBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 417                     </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">);
 418                     </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">);
 419                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.previousSibling</span><span class="jsdoc-syntax">;
 420                  </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterbegin&quot;</span><span class="jsdoc-syntax">:
 421                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">){
 422                         </span><span class="jsdoc-var">range.setStartBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
 423                         </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">);
 424                         </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">);
 425                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 426                     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 427                         </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
 428                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">;
 429                     }
 430                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;beforeend&quot;</span><span class="jsdoc-syntax">:
 431                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">){
 432                         </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">);
 433                         </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">);
 434                         </span><span class="jsdoc-var">el.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">frag</span><span class="jsdoc-syntax">);
 435                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
 436                     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 437                         </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
 438                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.lastChild</span><span class="jsdoc-syntax">;
 439                     }
 440                 </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;afterend&quot;</span><span class="jsdoc-syntax">:
 441                     </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
 442                     </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">);
 443                     </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">);
 444                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">el.nextSibling</span><span class="jsdoc-syntax">;
 445                 }
 446                 </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">;
 447         },
 448
 449         </span><span class="jsdoc-comment">/**
 450          * Creates new Dom element(s) and inserts them before el
 451          * @param {String/HTMLElement/Element} el The context element
 452          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 453          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 454          * @return {HTMLElement/Roo.Element} The new node
 455          */
 456         </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">){
 457             </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">);
 458         },
 459
 460         </span><span class="jsdoc-comment">/**
 461          * Creates new Dom element(s) and inserts them after el
 462          * @param {String/HTMLElement/Element} el The context element
 463          * @param {Object} o The Dom object spec (and children)
 464          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 465          * @return {HTMLElement/Roo.Element} The new node
 466          */
 467         </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">){
 468             </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">);
 469         },
 470
 471         </span><span class="jsdoc-comment">/**
 472          * Creates new Dom element(s) and inserts them as the first child of el
 473          * @param {String/HTMLElement/Element} el The context element
 474          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 475          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 476          * @return {HTMLElement/Roo.Element} The new node
 477          */
 478         </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">){
 479             </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">);
 480         },
 481
 482         </span><span class="jsdoc-comment">// private
 483         </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">){
 484             </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">);
 485             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
 486             </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">){
 487                 </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">);
 488                 </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">);
 489             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 490                 </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">);
 491                 </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">);
 492             }
 493             </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">;
 494         },
 495
 496         </span><span class="jsdoc-comment">/**
 497          * Creates new Dom element(s) and appends them to el
 498          * @param {String/HTMLElement/Element} el The context element
 499          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 500          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 501          * @return {HTMLElement/Roo.Element} The new node
 502          */
 503         </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">){
 504             </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">);
 505             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">;
 506             </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">){
 507                 </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">);
 508                 </span><span class="jsdoc-var">el.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newNode</span><span class="jsdoc-syntax">);
 509             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 510                 </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">);
 511                 </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">);
 512             }
 513             </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">;
 514         },
 515
 516         </span><span class="jsdoc-comment">/**
 517          * Creates new Dom element(s) and overwrites the contents of el with them
 518          * @param {String/HTMLElement/Element} el The context element
 519          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 520          * @param {Boolean} returnElement (optional) true to return a Roo.Element
 521          * @return {HTMLElement/Roo.Element} The new node
 522          */
 523         </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">)
 524         {
 525             </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">);
 526             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.ns</span><span class="jsdoc-syntax">) {
 527
 528                 </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.childNodes.length</span><span class="jsdoc-syntax">) {
 529                     </span><span class="jsdoc-var">el.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.firstChild</span><span class="jsdoc-syntax">);
 530                 }
 531                 </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">);
 532             } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
 533                 </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">);
 534             }
 535
 536             </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">;
 537         },
 538
 539         </span><span class="jsdoc-comment">/**
 540          * Creates a new Roo.DomHelper.Template from the Dom object spec
 541          * @param {Object} o The Dom object spec (and children)
 542          * @return {Roo.DomHelper.Template} The new template
 543          */
 544         </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">){
 545             </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">);
 546             </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">);
 547         },
 548          </span><span class="jsdoc-comment">/**
 549          * Updates the first element with the spec from the o (replacing if necessary)
 550          * This iterates through the children, and updates attributes / children etc..
 551          * @param {String/HTMLElement/Element} el The context element
 552          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
 553          */
 554
 555         </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">)
 556         {
 557             </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">));
 558
 559         }
 560
 561
 562     };
 563 }();
 564 </span></code></body></html>