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