Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / docs / source / Template-more.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 /**
16  * @class Ext.Template
17  */
18 Ext.apply(Ext.Template.prototype, {
19     <div id="cfg-Ext.Template-disableFormats"></div>/**
20      * @cfg {Boolean} disableFormats Specify <tt>true</tt> to disable format
21      * functions in the template. If the template does not contain
22      * {@link Ext.util.Format format functions}, setting <code>disableFormats</code>
23      * to true will reduce <code>{@link #apply}</code> time. Defaults to <tt>false</tt>.
24      * <pre><code>
25 var t = new Ext.Template(
26     '&lt;div name="{id}"&gt;',
27         '&lt;span class="{cls}"&gt;{name} {value}&lt;/span&gt;',
28     '&lt;/div&gt;',
29     {
30         compiled: true,      // {@link #compile} immediately
31         disableFormats: true // reduce <code>{@link #apply}</code> time since no formatting
32     }    
33 );
34      * </code></pre>
35      * For a list of available format functions, see {@link Ext.util.Format}.
36      */
37     disableFormats : false,                             
38     <div id="prop-Ext.Template-disableFormats"></div>/**
39      * See <code>{@link #disableFormats}</code>.
40      * @type Boolean
41      * @property disableFormats
42      */
43
44     <div id="prop-Ext.Template-re"></div>/**
45      * The regular expression used to match template variables
46      * @type RegExp
47      * @property
48      * @hide repeat doc
49      */
50     re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
51
52     <div id="method-Ext.Template-applyTemplate"></div>/**
53      * Returns an HTML fragment of this template with the specified values applied.
54      * @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'})
55      * @return {String} The HTML fragment
56      * @hide repeat doc
57      */
58     applyTemplate : function(values){
59                 var me = this,
60                         useF = me.disableFormats !== true,
61                 fm = Ext.util.Format, 
62                 tpl = me;           
63             
64         if(me.compiled){
65             return me.compiled(values);
66         }
67         function fn(m, name, format, args){
68             if (format && useF) {
69                 if (format.substr(0, 5) == "this.") {
70                     return tpl.call(format.substr(5), values[name], values);
71                 } else {
72                     if (args) {
73                         // quoted values are required for strings in compiled templates,
74                         // but for non compiled we need to strip them
75                         // quoted reversed for jsmin
76                         var re = /^\s*['"](.*)["']\s*$/;
77                         args = args.split(',');
78                         for(var i = 0, len = args.length; i < len; i++){
79                             args[i] = args[i].replace(re, "$1");
80                         }
81                         args = [values[name]].concat(args);
82                     } else {
83                         args = [values[name]];
84                     }
85                     return fm[format].apply(fm, args);
86                 }
87             } else {
88                 return values[name] !== undefined ? values[name] : "";
89             }
90         }
91         return me.html.replace(me.re, fn);
92     },
93                 
94     <div id="method-Ext.Template-compile"></div>/**
95      * Compiles the template into an internal function, eliminating the RegEx overhead.
96      * @return {Ext.Template} this
97      * @hide repeat doc
98      */
99     compile : function(){
100         var me = this,
101                 fm = Ext.util.Format,
102                 useF = me.disableFormats !== true,
103                 sep = Ext.isGecko ? "+" : ",",
104                 body;
105         
106         function fn(m, name, format, args){
107             if(format && useF){
108                 args = args ? ',' + args : "";
109                 if(format.substr(0, 5) != "this."){
110                     format = "fm." + format + '(';
111                 }else{
112                     format = 'this.call("'+ format.substr(5) + '", ';
113                     args = ", values";
114                 }
115             }else{
116                 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
117             }
118             return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
119         }
120         
121         // branched to use + in gecko and [].join() in others
122         if(Ext.isGecko){
123             body = "this.compiled = function(values){ return '" +
124                    me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
125                     "';};";
126         }else{
127             body = ["this.compiled = function(values){ return ['"];
128             body.push(me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
129             body.push("'].join('');};");
130             body = body.join('');
131         }
132         eval(body);
133         return me;
134     },
135     
136     // private function used to call members
137     call : function(fnName, value, allValues){
138         return this[fnName](value, allValues);
139     }
140 });
141 Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; </pre>    
142 </body>
143 </html>