Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / XTemplate.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.0
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.XTemplate"></div>/**
16  * @class Ext.XTemplate
17  * @extends Ext.Template
18  * <p>A template class that supports advanced functionality like:<div class="mdetail-params"><ul>
19  * <li>Autofilling arrays using templates and sub-templates</li>
20  * <li>Conditional processing with basic comparison operators</li>
21  * <li>Basic math function support</li>
22  * <li>Execute arbitrary inline code with special built-in template variables</li>
23  * <li>Custom member functions</li>
24  * <li>Many special tags and built-in operators that aren't defined as part of
25  * the API, but are supported in the templates that can be created</li>
26  * </ul></div></p>
27  * <p>XTemplate provides the templating mechanism built into:<div class="mdetail-params"><ul>
28  * <li>{@link Ext.DataView}</li>
29  * <li>{@link Ext.ListView}</li>
30  * <li>{@link Ext.form.ComboBox}</li>
31  * <li>{@link Ext.grid.TemplateColumn}</li>
32  * <li>{@link Ext.grid.GroupingView}</li>
33  * <li>{@link Ext.menu.Item}</li>
34  * <li>{@link Ext.layout.MenuLayout}</li>
35  * <li>{@link Ext.ColorPalette}</li>
36  * </ul></div></p>
37  * 
38  * <p>For example usage {@link #XTemplate see the constructor}.</p>  
39  *   
40  * @constructor
41  * The {@link Ext.Template#Template Ext.Template constructor} describes
42  * the acceptable parameters to pass to the constructor. The following
43  * examples demonstrate all of the supported features.</p>
44  * 
45  * <div class="mdetail-params"><ul>
46  * 
47  * <li><b><u>Sample Data</u></b> 
48  * <div class="sub-desc">
49  * <p>This is the data object used for reference in each code example:</p>
50  * <pre><code>
51 var data = {
52     name: 'Jack Slocum',
53     title: 'Lead Developer',
54     company: 'Ext JS, LLC',
55     email: 'jack@extjs.com',
56     address: '4 Red Bulls Drive',
57     city: 'Cleveland',
58     state: 'Ohio',
59     zip: '44102',
60     drinks: ['Red Bull', 'Coffee', 'Water'],
61     kids: [{
62         name: 'Sara Grace',
63         age:3
64     },{
65         name: 'Zachary',
66         age:2
67     },{
68         name: 'John James',
69         age:0
70     }]
71 };
72  * </code></pre>
73  * </div>
74  * </li>
75  * 
76  * 
77  * <li><b><u>Auto filling of arrays</u></b> 
78  * <div class="sub-desc">
79  * <p>The <b><tt>tpl</tt></b> tag and the <b><tt>for</tt></b> operator are used
80  * to process the provided data object:
81  * <ul>
82  * <li>If the value specified in <tt>for</tt> is an array, it will auto-fill,
83  * repeating the template block inside the <tt>tpl</tt> tag for each item in the
84  * array.</li>
85  * <li>If <tt>for="."</tt> is specified, the data object provided is examined.</li>
86  * <li>While processing an array, the special variable <tt>{#}</tt>
87  * will provide the current array index + 1 (starts at 1, not 0).</li>
88  * </ul>
89  * </p>
90  * <pre><code>
91 &lt;tpl <b>for</b>=".">...&lt;/tpl>       // loop through array at root node
92 &lt;tpl <b>for</b>="foo">...&lt;/tpl>     // loop through array at foo node
93 &lt;tpl <b>for</b>="foo.bar">...&lt;/tpl> // loop through array at foo.bar node
94  * </code></pre>
95  * Using the sample data above:
96  * <pre><code>
97 var tpl = new Ext.XTemplate(
98     '&lt;p>Kids: ',
99     '&lt;tpl <b>for</b>=".">',       // process the data.kids node
100         '&lt;p>{#}. {name}&lt;/p>',  // use current array index to autonumber
101     '&lt;/tpl>&lt;/p>'
102 );
103 tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
104  * </code></pre>
105  * <p>An example illustrating how the <b><tt>for</tt></b> property can be leveraged
106  * to access specified members of the provided data object to populate the template:</p>
107  * <pre><code>
108 var tpl = new Ext.XTemplate(
109     '&lt;p>Name: {name}&lt;/p>',
110     '&lt;p>Title: {title}&lt;/p>',
111     '&lt;p>Company: {company}&lt;/p>',
112     '&lt;p>Kids: ',
113     '&lt;tpl <b>for="kids"</b>>',     // interrogate the kids property within the data
114         '&lt;p>{name}&lt;/p>',
115     '&lt;/tpl>&lt;/p>'
116 );
117 tpl.overwrite(panel.body, data);  // pass the root node of the data object
118  * </code></pre>
119  * <p>Flat arrays that contain values (and not objects) can be auto-rendered
120  * using the special <b><tt>{.}</tt></b> variable inside a loop.  This variable
121  * will represent the value of the array at the current index:</p>
122  * <pre><code>
123 var tpl = new Ext.XTemplate(
124     '&lt;p>{name}\&#39;s favorite beverages:&lt;/p>',
125     '&lt;tpl for="drinks">',
126        '&lt;div> - {.}&lt;/div>',
127     '&lt;/tpl>'
128 );
129 tpl.overwrite(panel.body, data);
130  * </code></pre>
131  * <p>When processing a sub-template, for example while looping through a child array,
132  * you can access the parent object's members via the <b><tt>parent</tt></b> object:</p>
133  * <pre><code>
134 var tpl = new Ext.XTemplate(
135     '&lt;p>Name: {name}&lt;/p>',
136     '&lt;p>Kids: ',
137     '&lt;tpl for="kids">',
138         '&lt;tpl if="age > 1">',
139             '&lt;p>{name}&lt;/p>',
140             '&lt;p>Dad: {<b>parent</b>.name}&lt;/p>',
141         '&lt;/tpl>',
142     '&lt;/tpl>&lt;/p>'
143 );
144 tpl.overwrite(panel.body, data);
145  * </code></pre>
146  * </div>
147  * </li>
148  * 
149  * 
150  * <li><b><u>Conditional processing with basic comparison operators</u></b> 
151  * <div class="sub-desc">
152  * <p>The <b><tt>tpl</tt></b> tag and the <b><tt>if</tt></b> operator are used
153  * to provide conditional checks for deciding whether or not to render specific
154  * parts of the template. Notes:<div class="sub-desc"><ul>
155  * <li>Double quotes must be encoded if used within the conditional</li>
156  * <li>There is no <tt>else</tt> operator &mdash; if needed, two opposite
157  * <tt>if</tt> statements should be used.</li>
158  * </ul></div>
159  * <pre><code>
160 &lt;tpl if="age &gt; 1 &amp;&amp; age &lt; 10">Child&lt;/tpl>
161 &lt;tpl if="age >= 10 && age < 18">Teenager&lt;/tpl>
162 &lt;tpl <b>if</b>="this.isGirl(name)">...&lt;/tpl>
163 &lt;tpl <b>if</b>="id==\'download\'">...&lt;/tpl>
164 &lt;tpl <b>if</b>="needsIcon">&lt;img src="{icon}" class="{iconCls}"/>&lt;/tpl>
165 // no good:
166 &lt;tpl if="name == "Jack"">Hello&lt;/tpl>
167 // encode &#34; if it is part of the condition, e.g.
168 &lt;tpl if="name == &#38;quot;Jack&#38;quot;">Hello&lt;/tpl>
169  * </code></pre>
170  * Using the sample data above:
171  * <pre><code>
172 var tpl = new Ext.XTemplate(
173     '&lt;p>Name: {name}&lt;/p>',
174     '&lt;p>Kids: ',
175     '&lt;tpl for="kids">',
176         '&lt;tpl if="age > 1">',
177             '&lt;p>{name}&lt;/p>',
178         '&lt;/tpl>',
179     '&lt;/tpl>&lt;/p>'
180 );
181 tpl.overwrite(panel.body, data);
182  * </code></pre>
183  * </div>
184  * </li>
185  * 
186  * 
187  * <li><b><u>Basic math support</u></b> 
188  * <div class="sub-desc">
189  * <p>The following basic math operators may be applied directly on numeric
190  * data values:</p><pre>
191  * + - * /
192  * </pre>
193  * For example:
194  * <pre><code>
195 var tpl = new Ext.XTemplate(
196     '&lt;p>Name: {name}&lt;/p>',
197     '&lt;p>Kids: ',
198     '&lt;tpl for="kids">',
199         '&lt;tpl if="age &amp;gt; 1">',  // <-- Note that the &gt; is encoded
200             '&lt;p>{#}: {name}&lt;/p>',  // <-- Auto-number each item
201             '&lt;p>In 5 Years: {age+5}&lt;/p>',  // <-- Basic math
202             '&lt;p>Dad: {parent.name}&lt;/p>',
203         '&lt;/tpl>',
204     '&lt;/tpl>&lt;/p>'
205 );
206 tpl.overwrite(panel.body, data);
207 </code></pre>
208  * </div>
209  * </li>
210  *
211  * 
212  * <li><b><u>Execute arbitrary inline code with special built-in template variables</u></b> 
213  * <div class="sub-desc">
214  * <p>Anything between <code>{[ ... ]}</code> is considered code to be executed
215  * in the scope of the template. There are some special variables available in that code:
216  * <ul>
217  * <li><b><tt>values</tt></b>: The values in the current scope. If you are using
218  * scope changing sub-templates, you can change what <tt>values</tt> is.</li>
219  * <li><b><tt>parent</tt></b>: The scope (values) of the ancestor template.</li>
220  * <li><b><tt>xindex</tt></b>: If you are in a looping template, the index of the
221  * loop you are in (1-based).</li>
222  * <li><b><tt>xcount</tt></b>: If you are in a looping template, the total length
223  * of the array you are looping.</li>
224  * <li><b><tt>fm</tt></b>: An alias for <tt>Ext.util.Format</tt>.</li>
225  * </ul>
226  * This example demonstrates basic row striping using an inline code block and the
227  * <tt>xindex</tt> variable:</p>
228  * <pre><code>
229 var tpl = new Ext.XTemplate(
230     '&lt;p>Name: {name}&lt;/p>',
231     '&lt;p>Company: {[values.company.toUpperCase() + ", " + values.title]}&lt;/p>',
232     '&lt;p>Kids: ',
233     '&lt;tpl for="kids">',
234        '&lt;div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
235         '{name}',
236         '&lt;/div>',
237     '&lt;/tpl>&lt;/p>'
238 );
239 tpl.overwrite(panel.body, data);
240  * </code></pre>
241  * </div>
242  * </li>
243  * 
244  * <li><b><u>Template member functions</u></b> 
245  * <div class="sub-desc">
246  * <p>One or more member functions can be specified in a configuration
247  * object passed into the XTemplate constructor for more complex processing:</p>
248  * <pre><code>
249 var tpl = new Ext.XTemplate(
250     '&lt;p>Name: {name}&lt;/p>',
251     '&lt;p>Kids: ',
252     '&lt;tpl for="kids">',
253         '&lt;tpl if="this.isGirl(name)">',
254             '&lt;p>Girl: {name} - {age}&lt;/p>',
255         '&lt;/tpl>',
256         // use opposite if statement to simulate 'else' processing:
257         '&lt;tpl if="this.isGirl(name) == false">',
258             '&lt;p>Boy: {name} - {age}&lt;/p>',
259         '&lt;/tpl>',
260         '&lt;tpl if="this.isBaby(age)">',
261             '&lt;p>{name} is a baby!&lt;/p>',
262         '&lt;/tpl>',
263     '&lt;/tpl>&lt;/p>',
264     {
265         // XTemplate configuration:
266         compiled: true,
267         disableFormats: true,
268         // member functions:
269         isGirl: function(name){
270             return name == 'Sara Grace';
271         },
272         isBaby: function(age){
273             return age < 1;
274         }
275     }
276 );
277 tpl.overwrite(panel.body, data);
278  * </code></pre>
279  * </div>
280  * </li>
281  * 
282  * </ul></div>
283  * 
284  * @param {Mixed} config
285  */
286 Ext.XTemplate = function(){
287     Ext.XTemplate.superclass.constructor.apply(this, arguments);
288
289     var me = this,
290         s = me.html,
291         re = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
292         nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
293         ifRe = /^<tpl\b[^>]*?if="(.*?)"/,
294         execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
295         m,
296         id = 0,
297         tpls = [],
298         VALUES = 'values',
299         PARENT = 'parent',
300         XINDEX = 'xindex',
301         XCOUNT = 'xcount',
302         RETURN = 'return ',
303         WITHVALUES = 'with(values){ ';
304
305     s = ['<tpl>', s, '</tpl>'].join('');
306
307     while((m = s.match(re))){
308         var m2 = m[0].match(nameRe),
309                         m3 = m[0].match(ifRe),
310                 m4 = m[0].match(execRe),
311                 exp = null,
312                 fn = null,
313                 exec = null,
314                 name = m2 && m2[1] ? m2[1] : '';
315
316        if (m3) {
317            exp = m3 && m3[1] ? m3[1] : null;
318            if(exp){
319                fn = new Function(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES + RETURN +(Ext.util.Format.htmlDecode(exp))+'; }');
320            }
321        }
322        if (m4) {
323            exp = m4 && m4[1] ? m4[1] : null;
324            if(exp){
325                exec = new Function(VALUES, PARENT, XINDEX, XCOUNT, WITHVALUES +(Ext.util.Format.htmlDecode(exp))+'; }');
326            }
327        }
328        if(name){
329            switch(name){
330                case '.': name = new Function(VALUES, PARENT, WITHVALUES + RETURN + VALUES + '; }'); break;
331                case '..': name = new Function(VALUES, PARENT, WITHVALUES + RETURN + PARENT + '; }'); break;
332                default: name = new Function(VALUES, PARENT, WITHVALUES + RETURN + name + '; }');
333            }
334        }
335        tpls.push({
336             id: id,
337             target: name,
338             exec: exec,
339             test: fn,
340             body: m[1]||''
341         });
342        s = s.replace(m[0], '{xtpl'+ id + '}');
343        ++id;
344     }
345         Ext.each(tpls, function(t) {
346         me.compileTpl(t);
347     });
348     me.master = tpls[tpls.length-1];
349     me.tpls = tpls;
350 };
351 Ext.extend(Ext.XTemplate, Ext.Template, {
352     // private
353     re : /\{([\w-\.\#]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\\]\s?[\d\.\+\-\*\\\(\)]+)?\}/g,
354     // private
355     codeRe : /\{\[((?:\\\]|.|\n)*?)\]\}/g,
356
357     // private
358     applySubTemplate : function(id, values, parent, xindex, xcount){
359         var me = this,
360                 len,
361                 t = me.tpls[id],
362                 vs,
363                 buf = [];
364         if ((t.test && !t.test.call(me, values, parent, xindex, xcount)) ||
365             (t.exec && t.exec.call(me, values, parent, xindex, xcount))) {
366             return '';
367         }
368         vs = t.target ? t.target.call(me, values, parent) : values;
369         len = vs.length;
370         parent = t.target ? values : parent;
371         if(t.target && Ext.isArray(vs)){
372                 Ext.each(vs, function(v, i) {
373                 buf[buf.length] = t.compiled.call(me, v, parent, i+1, len);
374             });
375             return buf.join('');
376         }
377         return t.compiled.call(me, vs, parent, xindex, xcount);
378     },
379
380     // private
381     compileTpl : function(tpl){
382         var fm = Ext.util.Format,
383                 useF = this.disableFormats !== true,
384             sep = Ext.isGecko ? "+" : ",",
385             body;
386
387         function fn(m, name, format, args, math){
388             if(name.substr(0, 4) == 'xtpl'){
389                 return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent, xindex, xcount)'+sep+"'";
390             }
391             var v;
392             if(name === '.'){
393                 v = 'values';
394             }else if(name === '#'){
395                 v = 'xindex';
396             }else if(name.indexOf('.') != -1){
397                 v = name;
398             }else{
399                 v = "values['" + name + "']";
400             }
401             if(math){
402                 v = '(' + v + math + ')';
403             }
404             if (format && useF) {
405                 args = args ? ',' + args : "";
406                 if(format.substr(0, 5) != "this."){
407                     format = "fm." + format + '(';
408                 }else{
409                     format = 'this.call("'+ format.substr(5) + '", ';
410                     args = ", values";
411                 }
412             } else {
413                 args= ''; format = "("+v+" === undefined ? '' : ";
414             }
415             return "'"+ sep + format + v + args + ")"+sep+"'";
416         }
417
418         function codeFn(m, code){
419             // Single quotes get escaped when the template is compiled, however we want to undo this when running code.
420             return "'" + sep + '(' + code.replace(/\\'/g, "'") + ')' + sep + "'";
421         }
422
423         // branched to use + in gecko and [].join() in others
424         if(Ext.isGecko){
425             body = "tpl.compiled = function(values, parent, xindex, xcount){ return '" +
426                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn) +
427                     "';};";
428         }else{
429             body = ["tpl.compiled = function(values, parent, xindex, xcount){ return ['"];
430             body.push(tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn).replace(this.codeRe, codeFn));
431             body.push("'].join('');};");
432             body = body.join('');
433         }
434         eval(body);
435         return this;
436     },
437
438     <div id="method-Ext.XTemplate-applyTemplate"></div>/**
439      * Returns an HTML fragment of this template with the specified values applied.
440      * @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'})
441      * @return {String} The HTML fragment
442      */
443     applyTemplate : function(values){
444         return this.master.compiled.call(this, values, {}, 1, 1);
445     },
446
447     <div id="method-Ext.XTemplate-compile"></div>/**
448      * Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.
449      * @return {Function} The compiled function
450      */
451     compile : function(){return this;}
452
453     <div id="prop-Ext.XTemplate-re"></div>/**
454      * @property re
455      * @hide
456      */
457     <div id="prop-Ext.XTemplate-disableFormats"></div>/**
458      * @property disableFormats
459      * @hide
460      */
461     <div id="method-Ext.XTemplate-set"></div>/**
462      * @method set
463      * @hide
464      */
465
466 });
467 <div id="method-Ext.XTemplate-apply"></div>/**
468  * Alias for {@link #applyTemplate}
469  * Returns an HTML fragment of this template with the specified values applied.
470  * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
471  * @return {String} The HTML fragment
472  * @member Ext.XTemplate
473  * @method apply
474  */
475 Ext.XTemplate.prototype.apply = Ext.XTemplate.prototype.applyTemplate;
476
477 <div id="method-Ext.XTemplate-XTemplate.from"></div>/**
478  * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
479  * @param {String/HTMLElement} el A DOM element or its id
480  * @return {Ext.Template} The created template
481  * @static
482  */
483 Ext.XTemplate.from = function(el){
484     el = Ext.getDom(el);
485     return new Ext.XTemplate(el.value || el.innerHTML);
486 };</pre>    
487 </body>
488 </html>