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

   1 <html><head><title>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     html :  '&amp;lt;div name=&quot;{id}&quot;&amp;gt;' +
  20         '&amp;lt;span class=&quot;{cls}&quot;&amp;gt;{name:trim} {someval:this.myformat}{value:ellipsis(10)}&amp;lt;/span&amp;gt;' +
  21         '&amp;lt;/div&amp;gt;',
  22     myformat: function (value, allValues) {
  23         return 'XX' + value;
  24     }
  25 });
  26 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
  27 &lt;/code&gt;&lt;/pre&gt;
  28 * For more information see this blog post with examples:
  29 *  &lt;a href=&quot;http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/&quot;&gt;DomHelper
  30      - Create Elements using DOM, HTML fragments and Templates&lt;/a&gt;.
  31 * @constructor
  32 * @param {Object} cfg - Configuration object.
  33 */
  34 </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">cfg</span><span class="jsdoc-syntax">){
  35     </span><span class="jsdoc-comment">// BC!
  36     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg </span><span class="jsdoc-keyword">instanceof </span><span class="jsdoc-var">Array</span><span class="jsdoc-syntax">){
  37         </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
  38     }</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){
  39         </span><span class="jsdoc-var">cfg </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">);
  40     }
  41
  42
  43     </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">cfg</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'object'</span><span class="jsdoc-syntax">) {
  44         </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">)
  45     } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
  46         </span><span class="jsdoc-comment">// bc
  47         </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
  48     }
  49     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.url</span><span class="jsdoc-syntax">) {
  50         </span><span class="jsdoc-var">this.load</span><span class="jsdoc-syntax">();
  51     }
  52
  53 };
  54 </span><span class="jsdoc-var">Roo.Template.prototype </span><span class="jsdoc-syntax">= {
  55
  56     </span><span class="jsdoc-comment">/**
  57      * @cfg {Function} onLoad Called after the template has been loaded and complied (usually from a remove source)
  58      */
  59     </span><span class="jsdoc-var">onLoad </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  60
  61
  62     </span><span class="jsdoc-comment">/**
  63      * @cfg {String} url  The Url to load the template from. beware if you are loading from a url, the data may not be ready if you use it instantly..
  64      *                    it should be fixed so that template is observable...
  65      */
  66     </span><span class="jsdoc-var">url </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  67     </span><span class="jsdoc-comment">/**
  68      * @cfg {String} html  The HTML fragment or an array of fragments to join(&quot;&quot;) or multiple arguments to join(&quot;&quot;)
  69      */
  70     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  71
  72
  73     </span><span class="jsdoc-var">compiled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  74     </span><span class="jsdoc-var">loaded </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  75     </span><span class="jsdoc-comment">/**
  76      * Returns an HTML fragment of this template with the specified values applied.
  77      * @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'})
  78      * @return {String} The HTML fragment
  79      */
  80
  81
  82
  83     </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">){
  84         </span><span class="jsdoc-comment">//Roo.log([&quot;applyTemplate&quot;, values]);
  85         </span><span class="jsdoc-keyword">try </span><span class="jsdoc-syntax">{
  86
  87             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.compiled</span><span class="jsdoc-syntax">){
  88                 </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">);
  89             }
  90             </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">;
  91             </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">;
  92             </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">){
  93                 </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">){
  94                     </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">){
  95                         </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">);
  96                     }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
  97                         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">){
  98                             </span><span class="jsdoc-comment">// quoted values are required for strings in compiled templates,
  99                             // but for non compiled we need to strip them
 100                             // quoted reversed for jsmin
 101                             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= /^\s*['&quot;](.*)[&quot;']\s*$/;
 102                             </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">);
 103                             </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">++){
 104                                 </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">);
 105                             }
 106                             </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">);
 107                         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 108                             </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">]];
 109                         }
 110                         </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">);
 111                     }
 112                 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 113                     </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">;
 114                 }
 115             };
 116             </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">);
 117         } </span><span class="jsdoc-keyword">catch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
 118             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
 119             </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">;
 120         }
 121
 122     },
 123
 124     </span><span class="jsdoc-var">loading </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 125
 126     </span><span class="jsdoc-var">load </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
 127     {
 128
 129         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loading</span><span class="jsdoc-syntax">) {
 130             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 131         }
 132         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 133
 134         </span><span class="jsdoc-var">this.loading </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 135         </span><span class="jsdoc-var">this.compiled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 136
 137         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.Connection</span><span class="jsdoc-syntax">();
 138         </span><span class="jsdoc-var">cx.request</span><span class="jsdoc-syntax">({
 139             </span><span class="jsdoc-var">url </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.url</span><span class="jsdoc-syntax">,
 140             </span><span class="jsdoc-var">method </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'GET'</span><span class="jsdoc-syntax">,
 141             </span><span class="jsdoc-var">success </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">response</span><span class="jsdoc-syntax">) {
 142                 </span><span class="jsdoc-var">_t.loading </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 143                 </span><span class="jsdoc-var">_t.url </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 144
 145                 </span><span class="jsdoc-var">_t.set</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">response.responseText</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 146                 </span><span class="jsdoc-var">_t.loaded </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
 147                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_t.onLoad</span><span class="jsdoc-syntax">) {
 148                     </span><span class="jsdoc-var">_t.onLoad</span><span class="jsdoc-syntax">();
 149                 }
 150              },
 151             </span><span class="jsdoc-var">failure </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">response</span><span class="jsdoc-syntax">) {
 152                 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;Template failed to load from &quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">_t.url</span><span class="jsdoc-syntax">);
 153                 </span><span class="jsdoc-var">_t.loading </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 154             }
 155         });
 156     },
 157
 158     </span><span class="jsdoc-comment">/**
 159      * Sets the HTML used as the template and optionally compiles it.
 160      * @param {String} html
 161      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
 162      * @return {Roo.Template} this
 163      */
 164     </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">){
 165         </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">;
 166         </span><span class="jsdoc-var">this.compiled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
 167         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">compile</span><span class="jsdoc-syntax">){
 168             </span><span class="jsdoc-var">this.compile</span><span class="jsdoc-syntax">();
 169         }
 170         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 171     },
 172
 173     </span><span class="jsdoc-comment">/**
 174      * True to disable format functions (defaults to false)
 175      * @type Boolean
 176      */
 177     </span><span class="jsdoc-var">disableFormats </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 178
 179     </span><span class="jsdoc-comment">/**
 180     * The regular expression used to match template variables
 181     * @type RegExp
 182     * @property
 183     */
 184     </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">: /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
 185
 186     </span><span class="jsdoc-comment">/**
 187      * Compiles the template into an internal function, eliminating the RegEx overhead.
 188      * @return {Roo.Template} this
 189      */
 190     </span><span class="jsdoc-var">compile </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
 191         </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">;
 192         </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">;
 193         </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">;
 194         </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">){
 195             </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">){
 196                 </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">;
 197                 </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">){
 198                     </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">;
 199                 }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 200                     </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">;
 201                     </span><span class="jsdoc-var">args </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;, values&quot;</span><span class="jsdoc-syntax">;
 202                 }
 203             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 204                 </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">;
 205             }
 206             </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">;
 207         };
 208         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">;
 209         </span><span class="jsdoc-comment">// branched to use + in gecko and [].join() in others
 210         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isGecko</span><span class="jsdoc-syntax">){
 211             </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">+
 212                    </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">) +
 213                     </span><span class="jsdoc-string">&quot;';};&quot;</span><span class="jsdoc-syntax">;
 214         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 215             </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">];
 216             </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">));
 217             </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">);
 218             </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">);
 219         }
 220         </span><span class="jsdoc-comment">/**
 221          * eval:var:values
 222          * eval:var:fm
 223          */
 224         </span><span class="jsdoc-keyword">eval</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">body</span><span class="jsdoc-syntax">);
 225         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
 226     },
 227
 228     </span><span class="jsdoc-comment">// private function used to call members
 229     </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">){
 230         </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">);
 231     },
 232
 233     </span><span class="jsdoc-comment">/**
 234      * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
 235      * @param {String/HTMLElement/Roo.Element} el The context element
 236      * @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'})
 237      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 238      * @return {HTMLElement/Roo.Element} The new node or Element
 239      */
 240     </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">){
 241         </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">);
 242     },
 243
 244     </span><span class="jsdoc-comment">/**
 245      * Applies the supplied values to the template and inserts the new node(s) before el.
 246      * @param {String/HTMLElement/Roo.Element} el The context element
 247      * @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'})
 248      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 249      * @return {HTMLElement/Roo.Element} The new node or Element
 250      */
 251     </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">){
 252         </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">);
 253     },
 254
 255     </span><span class="jsdoc-comment">/**
 256      * Applies the supplied values to the template and inserts the new node(s) after el.
 257      * @param {String/HTMLElement/Roo.Element} el The context element
 258      * @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'})
 259      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 260      * @return {HTMLElement/Roo.Element} The new node or Element
 261      */
 262     </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">){
 263         </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">);
 264     },
 265
 266     </span><span class="jsdoc-comment">/**
 267      * Applies the supplied values to the template and appends the new node(s) to el.
 268      * @param {String/HTMLElement/Roo.Element} el The context element
 269      * @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'})
 270      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 271      * @return {HTMLElement/Roo.Element} The new node or Element
 272      */
 273     </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">){
 274         </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">);
 275     },
 276
 277     </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">){
 278         </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">);
 279         </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">));
 280         </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">;
 281     },
 282
 283     </span><span class="jsdoc-comment">/**
 284      * Applies the supplied values to the template and overwrites the content of el with the new node(s).
 285      * @param {String/HTMLElement/Roo.Element} el The context element
 286      * @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'})
 287      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
 288      * @return {HTMLElement/Roo.Element} The new node or Element
 289      */
 290     </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">){
 291         </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">);
 292         </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">);
 293         </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">;
 294     }
 295 };
 296 </span><span class="jsdoc-comment">/**
 297  * Alias for {@link #applyTemplate}
 298  * @method
 299  */
 300 </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">;
 301
 302 </span><span class="jsdoc-comment">// backwards compat
 303 </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">;
 304
 305 </span><span class="jsdoc-comment">/**
 306  * Creates a template from the passed element's value (&lt;i&gt;display:none&lt;/i&gt; textarea, preferred) or innerHTML.
 307  * @param {String/HTMLElement} el A DOM element or its id
 308  * @returns {Roo.Template} The created template
 309  * @static
 310  */
 311 </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">){
 312     </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">);
 313     </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">);
 314 };</span></code></body></html>