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

   1 <html><head><title>../roojs1/Roo/Template.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 * @class Roo.Template
  14 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
  15 * For a list of available format functions, see {@link Roo.util.Format}.&lt;br /&gt;
  16 * Usage:
  17 &lt;pre&gt;&lt;code&gt;
  18 var t = new Roo.Template(
  19     '&amp;lt;div name=&quot;{id}&quot;&amp;gt;',
  20         '&amp;lt;span class=&quot;{cls}&quot;&amp;gt;{name:trim} {value:ellipsis(10)}&amp;lt;/span&amp;gt;',
  21     '&amp;lt;/div&amp;gt;'
  22 );
  23 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
  24 &lt;/code&gt;&lt;/pre&gt;
  25 * For more information see this blog post with examples: &lt;a href=&quot;http://www.jackslocum.com/yui/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/&quot;&gt;DomHelper - Create Elements using DOM, HTML fragments and Templates&lt;/a&gt;.
  26 * @constructor
  27 * @param {String/Array} html The HTML fragment or an array of fragments to join(&quot;&quot;) or multiple arguments to join(&quot;&quot;)
  28 */
  29 </span><span class="jsdoc-var">Roo.Template </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">){
  30     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">html </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
  31         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
  32     }</span><span class="jsdoc-keyword">else if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments.length </span><span class="jsdoc-syntax">&gt; 1){
  33         </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.prototype.join.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">arguments</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
  34     }
  35     </span><span class="jsdoc-comment">/**@private*/
  36     </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
  37
  38 };
  39 </span><span class="jsdoc-var">Roo.Template.prototype </span><span class="jsdoc-syntax">= {
  40     </span><span class="jsdoc-comment">/**
  41      * Returns an HTML fragment of this template with the specified values applied.
  42      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
  43      * @return {String} The HTML fragment
  44      */
  45     </span><span class="jsdoc-var">applyTemplate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">){
  46         </span><span class="jsdoc-keyword">try </span><span class="jsdoc-syntax">{
  47
  48             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.compiled</span><span class="jsdoc-syntax">){
  49                 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.compiled</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">);
  50             }
  51             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">useF </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.disableFormats </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
  52             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.util.Format</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">tpl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
  53             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">){
  54                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">useF</span><span class="jsdoc-syntax">){
  55                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format.substr</span><span class="jsdoc-syntax">(0, 5) == </span><span class="jsdoc-string">&quot;this.&quot;</span><span class="jsdoc-syntax">){
  56                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">tpl.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format.substr</span><span class="jsdoc-syntax">(5), </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">);
  57                     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  58                         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">){
  59                             </span><span class="jsdoc-comment">// quoted values are required for strings in compiled templates,
  60                             // but for non compiled we need to strip them
  61                             // quoted reversed for jsmin
  62                             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= /^\s*['&quot;](.*)[&quot;']\s*$/;
  63                             </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">args.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">','</span><span class="jsdoc-syntax">);
  64                             </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">args.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">++){
  65                                 </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;$1&quot;</span><span class="jsdoc-syntax">);
  66                             }
  67                             </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">]]</span><span class="jsdoc-var">.concat</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">);
  68                         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  69                             </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">]];
  70                         }
  71                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">fm</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fm</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">);
  72                     }
  73                 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  74                     </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] !== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">] : </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
  75                 }
  76             };
  77             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.html.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.re</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
  78         } </span><span class="jsdoc-keyword">catch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
  79             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
  80         }
  81         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
  82     },
  83
  84     </span><span class="jsdoc-comment">/**
  85      * Sets the HTML used as the template and optionally compiles it.
  86      * @param {String} html
  87      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
  88      * @return {Roo.Template} this
  89      */
  90     </span><span class="jsdoc-var">set </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">, </span><span class="jsdoc-var">compile</span><span class="jsdoc-syntax">){
  91         </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
  92         </span><span class="jsdoc-var">this.compiled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">;
  93         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">compile</span><span class="jsdoc-syntax">){
  94             </span><span class="jsdoc-var">this.compile</span><span class="jsdoc-syntax">();
  95         }
  96         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
  97     },
  98
  99     </span><span class="jsdoc-comment">/**
 100      * True to disable format functions (defaults to false)
 101      * @type Boolean
 102      */
 103     </span><span class="jsdoc-var">disableFormats </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 104
 105     </span><span class="jsdoc-comment">/**
 106     * The regular expression used to match template variables
 107     * @type RegExp
 108     * @property
 109     */
 110     </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">: /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
 111
 112     </span><span class="jsdoc-comment">/**
 113      * Compiles the template into an internal function, eliminating the RegEx overhead.
 114      * @return {Roo.Template} this
 115      */
 116     </span><span class="jsdoc-var">compile </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 117         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.util.Format</span><span class="jsdoc-syntax">;
 118         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">useF </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.disableFormats </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 119         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sep </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isGecko </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;+&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;,&quot;</span><span class="jsdoc-syntax">;
 120         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">format</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">){
 121             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">useF</span><span class="jsdoc-syntax">){
 122                 </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">;
 123                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">format.substr</span><span class="jsdoc-syntax">(0, 5) != </span><span class="jsdoc-string">&quot;this.&quot;</span><span class="jsdoc-syntax">){
 124                     </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;fm.&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'('</span><span class="jsdoc-syntax">;
 125                 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 126                     </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'this.call(&quot;'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">format.substr</span><span class="jsdoc-syntax">(5) + </span><span class="jsdoc-string">'&quot;, '</span><span class="jsdoc-syntax">;
 127                     </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;, values&quot;</span><span class="jsdoc-syntax">;
 128                 }
 129             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 130                 </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;(values['&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;'] == undefined ? '' : &quot;</span><span class="jsdoc-syntax">;
 131             }
 132             </span><span class="jsdoc-keyword">return </span><span class="jsdoc-string">&quot;'&quot;</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">sep </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">format </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;values['&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;']&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;)&quot;</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">sep</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">&quot;'&quot;</span><span class="jsdoc-syntax">;
 133         };
 134         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
 135         </span><span class="jsdoc-comment">// branched to use + in gecko and [].join() in others
 136         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isGecko</span><span class="jsdoc-syntax">){
 137             </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;this.compiled = function(values){ return '&quot; </span><span class="jsdoc-syntax">+
 138                    </span><span class="jsdoc-var">this.html.replace</span><span class="jsdoc-syntax">(/\\/g, </span><span class="jsdoc-string">'\\\\'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/(\r\n|\n)/g, </span><span class="jsdoc-string">'\\n'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/'/g, </span><span class="jsdoc-string">&quot;\\'&quot;</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.re</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">) +
 139                     </span><span class="jsdoc-string">&quot;';};&quot;</span><span class="jsdoc-syntax">;
 140         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 141             </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-string">&quot;this.compiled = function(values){ return ['&quot;</span><span class="jsdoc-syntax">];
 142             </span><span class="jsdoc-var">body.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.html.replace</span><span class="jsdoc-syntax">(/\\/g, </span><span class="jsdoc-string">'\\\\'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/(\r\n|\n)/g, </span><span class="jsdoc-string">'\\n'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/'/g, </span><span class="jsdoc-string">&quot;\\'&quot;</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.re</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">));
 143             </span><span class="jsdoc-var">body.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;'].join('');};&quot;</span><span class="jsdoc-syntax">);
 144             </span><span class="jsdoc-var">body </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">body.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
 145         }
 146         </span><span class="jsdoc-comment">/**
 147          * eval:var:values
 148          * eval:var:fm
 149          */
 150         </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">);
 151         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 152     },
 153
 154     </span><span class="jsdoc-comment">// private function used to call members
 155     </span><span class="jsdoc-var">call </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">allValues</span><span class="jsdoc-syntax">){
 156         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">fnName</span><span class="jsdoc-syntax">](</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">allValues</span><span class="jsdoc-syntax">);
 157     },
 158
 159     </span><span class="jsdoc-comment">/**
 160      * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
 161      * @param {String/HTMLElement/Roo.Element} el The context element
 162      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 163      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 164      * @return {HTMLElement/Roo.Element} The new node or Element
 165      */
 166     </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">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 167         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'afterBegin'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">);
 168     },
 169
 170     </span><span class="jsdoc-comment">/**
 171      * Applies the supplied values to the template and inserts the new node(s) before el.
 172      * @param {String/HTMLElement/Roo.Element} el The context element
 173      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 174      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 175      * @return {HTMLElement/Roo.Element} The new node or Element
 176      */
 177     </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">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 178         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeBegin'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">);
 179     },
 180
 181     </span><span class="jsdoc-comment">/**
 182      * Applies the supplied values to the template and inserts the new node(s) after el.
 183      * @param {String/HTMLElement/Roo.Element} el The context element
 184      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 185      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 186      * @return {HTMLElement/Roo.Element} The new node or Element
 187      */
 188     </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">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 189         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'afterEnd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">);
 190     },
 191
 192     </span><span class="jsdoc-comment">/**
 193      * Applies the supplied values to the template and appends the new node(s) to el.
 194      * @param {String/HTMLElement/Roo.Element} el The context element
 195      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 196      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 197      * @return {HTMLElement/Roo.Element} The new node or Element
 198      */
 199     </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">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 200         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.doInsert</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforeEnd'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">);
 201     },
 202
 203     </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">where</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnEl</span><span class="jsdoc-syntax">){
 204         </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">);
 205         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.insertHtml</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">this.applyTemplate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">));
 206         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">returnEl </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">;
 207     },
 208
 209     </span><span class="jsdoc-comment">/**
 210      * Applies the supplied values to the template and overwrites the content of el with the new node(s).
 211      * @param {String/HTMLElement/Roo.Element} el The context element
 212      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 213      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 214      * @return {HTMLElement/Roo.Element} The new node or Element
 215      */
 216     </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">values</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">returnElement</span><span class="jsdoc-syntax">){
 217         </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">);
 218         </span><span class="jsdoc-var">el.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.applyTemplate</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">values</span><span class="jsdoc-syntax">);
 219         </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">;
 220     }
 221 };
 222 </span><span class="jsdoc-comment">/**
 223  * Alias for {@link #applyTemplate}
 224  * @method
 225  */
 226 </span><span class="jsdoc-var">Roo.Template.prototype.apply </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Template.prototype.applyTemplate</span><span class="jsdoc-syntax">;
 227
 228 </span><span class="jsdoc-comment">// backwards compat
 229 </span><span class="jsdoc-var">Roo.DomHelper.Template </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">;
 230
 231 </span><span class="jsdoc-comment">/**
 232  * Creates a template from the passed element's value (&lt;i&gt;display:none&lt;/i&gt; textarea, preferred) or innerHTML.
 233  * @param {String/HTMLElement} el A DOM element or its id
 234  * @returns {Roo.Template} The created template
 235  * @static
 236  */
 237 </span><span class="jsdoc-var">Roo.Template.from </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">){
 238     </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">);
 239     </span><span class="jsdoc-keyword">return new </span><span class="jsdoc-var">Roo.Template</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el.value </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">el.innerHTML</span><span class="jsdoc-syntax">);
 240 };</span></code></body></html>