Ext.XTemplate.html
22.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
<div class="body-wrap">
<div class="top-tools">
<a class="inner-link" href="#Ext.XTemplate-props"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-prop">Properties</a>
<a class="inner-link" href="#Ext.XTemplate-methods"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-method">Methods</a>
<a class="inner-link" href="#Ext.XTemplate-events"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-event">Events</a>
<a class="bookmark" href="../docs/?class=Ext.XTemplate"><img src="../resources/images/default/s_wev8.gif" class="item-icon icon-fav">Direct Link</a>
</div>
<div class="inheritance res-block">
<pre class="res-block-inner"><a ext:cls="Ext.Template" ext:member="" href="output/Ext.Template.html">Template</a>
<img src="resources/elbow-end_wev8.gif"/>XTemplate</pre></div>
<h1>Class Ext.XTemplate</h1>
<table cellspacing="0">
<tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
<tr><td class="label">Defined In:</td><td class="hd-info"><a href="../source/util/XTemplate_wev8.js" target="_blank">XTemplate_wev8.js</a></td></tr>
<tr><td class="label">Class:</td><td class="hd-info">XTemplate</td></tr>
<tr><td class="label">Extends:</td><td class="hd-info"><a ext:cls="Ext.Template" ext:member="" href="output/Ext.Template.html">Template</a></td></tr>
</table>
<div class="description">
<p>A template class that supports advanced functionality like autofilling arrays, conditional processing with
basic comparison operators, sub-templates, basic math function support, special built-in template variables,
inline code execution and more. XTemplate also provides the templating mechanism built into <a ext:cls="Ext.DataView" href="output/Ext.DataView.html">Ext.DataView</a>.</p>
<p>XTemplate supports many special tags and built-in operators that aren't defined as part of the API, but are
supported in the templates that can be created. The following examples demonstrate all of the supported features.
This is the data object used for reference in each code example:</p>
<pre><code>var data = {
name: <em>'Jack Slocum'</em>,
title: <em>'Lead Developer'</em>,
company: <em>'Ext JS, LLC'</em>,
email: <em>'jack@extjs.com'</em>,
address: <em>'4 Red Bulls Drive'</em>,
city: <em>'Cleveland'</em>,
state: <em>'Ohio'</em>,
zip: <em>'44102'</em>,
drinks: [<em>'Red Bull'</em>, <em>'Coffee'</em>, <em>'Water'</em>],
kids: [{
name: <em>'Sara Grace'</em>,
age:3
},{
name: <em>'Zachary'</em>,
age:2
},{
name: <em>'John James'</em>,
age:0
}]
};</code></pre>
<p><b>Auto filling of arrays and scope switching</b><br/>Using the <tt>tpl</tt> tag and the <tt>for</tt> operator,
you can switch to the scope of the object specified by <tt>for</tt> and access its members to populate the teamplte.
If the variable in <tt>for</tt> is an array, it will auto-fill, repeating the template block inside the <tt>tpl</tt>
tag for each item in the array:</p>
<pre><code>var tpl = <b>new</b> Ext.XTemplate(
<em>'<p>Name: {name}</p>'</em>,
<em>'<p>Title: {title}</p>'</em>,
<em>'<p>Company: {company}</p>'</em>,
<em>'<p>Kids: '</em>,
<em>'<tpl <b>for</b>="kids">'</em>,
<em>'<p>{name}</p>'</em>,
<em>'</tpl></p>'</em>
);
tpl.overwrite(panel.body, data);</code></pre>
<p><b>Access to parent object from within sub-template scope</b><br/>When processing a sub-template, for example while
looping through a child array, you can access the parent object's members via the <tt>parent</tt> object:</p>
<pre><code>var tpl = <b>new</b> Ext.XTemplate(
<em>'<p>Name: {name}</p>'</em>,
<em>'<p>Kids: '</em>,
<em>'<tpl <b>for</b>="kids">'</em>,
<em>'<tpl <b>if</b>="age > 1">'</em>,
<em>'<p>{name}</p>'</em>,
<em>'<p>Dad: {parent.name}</p>'</em>,
<em>'</tpl>'</em>,
<em>'</tpl></p>'</em>
);
tpl.overwrite(panel.body, data);</code></pre>
<p><b>Array item index and basic math support</b> <br/>While processing an array, the special variable <tt>{#}</tt>
will provide the current array index + 1 (starts at 1, not 0). Templates also support the basic math operators
+ - * and / that can be applied directly on numeric data values:</p>
<pre><code>var tpl = <b>new</b> Ext.XTemplate(
<em>'<p>Name: {name}</p>'</em>,
<em>'<p>Kids: '</em>,
<em>'<tpl <b>for</b>="kids">'</em>,
<em>'<tpl <b>if</b>="age > 1">'</em>,
<em>'<p>{#}: {name}</p>'</em>, <i>// <-- Auto-number each item</i>
<em>'<p>In 5 Years: {age+5}</p>'</em>, <i>// <-- Basic math</i>
<em>'<p>Dad: {parent.name}</p>'</em>,
<em>'</tpl>'</em>,
<em>'</tpl></p>'</em>
);
tpl.overwrite(panel.body, data);</code></pre>
<p><b>Auto-rendering of flat arrays</b> <br/>Flat arrays that contain values (and not objects) can be auto-rendered
using the special <tt>{.}</tt> variable inside a loop. This variable will represent the value of
the array at the current index:</p>
<pre><code>var tpl = <b>new</b> Ext.XTemplate(
<em>'<p>{name}\'</em>s favorite beverages:</p>',
<em>'<tpl <b>for</b>="drinks">'</em>,
<em>'<div> - {.}</div>'</em>,
<em>'</tpl>'</em>
);
tpl.overwrite(panel.body, data);</code></pre>
<p><b>Basic conditional logic</b> <br/>Using the <tt>tpl</tt> tag and the <tt>if</tt>
operator you can provide conditional checks for deciding whether or not to render specific parts of the template.
Note that there is no <tt>else</tt> operator — if needed, you should use two opposite <tt>if</tt> statements.
Properly-encoded attributes are required as seen in the following example:</p>
<pre><code>var tpl = <b>new</b> Ext.XTemplate(
<em>'<p>Name: {name}</p>'</em>,
<em>'<p>Kids: '</em>,
<em>'<tpl <b>for</b>="kids">'</em>,
<em>'<tpl <b>if</b>="age &gt; 1">'</em>, <i>// <-- Note that the > is encoded</i>
<em>'<p>{name}</p>'</em>,
<em>'</tpl>'</em>,
<em>'</tpl></p>'</em>
);
tpl.overwrite(panel.body, data);</code></pre>
<p><b>Ability to execute arbitrary inline code</b> <br/>In an XTemplate, anything between {[ ... ]} is considered
code to be executed in the scope of the template. There are some special variables available in that code:
<ul>
<li><b><tt>values</tt></b>: The values in the current scope. If you are using scope changing sub-templates, you
can change what <tt>values</tt> is.</li>
<li><b><tt>parent</tt></b>: The scope (values) of the ancestor template.</li>
<li><b><tt>xindex</tt></b>: If you are in a looping template, the index of the loop you are in (1-based).</li>
<li><b><tt>xcount</tt></b>: If you are in a looping template, the total length of the array you are looping.</li>
<li><b><tt>fm</tt></b>: An alias for <tt>Ext.util.Format</tt>.</li>
</ul>
This example demonstrates basic row striping using an inline code block and the <tt>xindex</tt> variable:</p>
<pre><code>var tpl = <b>new</b> Ext.XTemplate(
<em>'<p>Name: {name}</p>'</em>,
<em>'<p>Company: {[company.toUpperCase() + '</em>, <em>' + title]}</p>'</em>,
<em>'<p>Kids: '</em>,
<em>'<tpl <b>for</b>="kids">'</em>,
'<div class=<em>"{[xindex % 2 === 0 ? "</em>even<em>" : "</em>odd<em>"]}"</em>>,
<em>'{name}'</em>,
<em>'</div>'</em>,
<em>'</tpl></p>'</em>
);
tpl.overwrite(panel.body, data);</code></pre>
<p><b>Template member functions</b> <br/>One or more member functions can be defined directly on the config
object passed into the XTemplate constructor for more complex processing:</p>
<pre><code>var tpl = <b>new</b> Ext.XTemplate(
<em>'<p>Name: {name}</p>'</em>,
<em>'<p>Kids: '</em>,
<em>'<tpl <b>for</b>="kids">'</em>,
<em>'<tpl <b>if</b>="<b>this</b>.isGirl(name)">'</em>,
<em>'<p>Girl: {name} - {age}</p>'</em>,
<em>'</tpl>'</em>,
<em>'<tpl <b>if</b>="<b>this</b>.isGirl(name) == false">'</em>,
<em>'<p>Boy: {name} - {age}</p>'</em>,
<em>'</tpl>'</em>,
<em>'<tpl <b>if</b>="<b>this</b>.isBaby(age)">'</em>,
<em>'<p>{name} is a baby!</p>'</em>,
<em>'</tpl>'</em>,
<em>'</tpl></p>'</em>, {
isGirl: <b>function</b>(name){
<b>return</b> name == <em>'Sara Grace'</em>;
},
isBaby: <b>function</b>(age){
<b>return</b> age < 1;
}
});
tpl.overwrite(panel.body, data);</code></pre> </div>
<div class="hr"></div>
<a id="Ext.XTemplate-props"></a>
<h2>Public Properties</h2>
<div class="no-members">This class has no public properties.</div> <a id="Ext.XTemplate-methods"></a>
<h2>Public Methods</h2>
<table cellspacing="0" class="member-table">
<tr>
<th class="sig-header" colspan="2">Method</th>
<th class="msource-header">Defined By</th>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-XTemplate"></a>
<b>XTemplate</b>( <code>String/Array/Object parts</code> ) <div class="mdesc">
<div class="short"></div>
<div class="long">
<div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>parts</code> : String/Array/Object<div class="sub-desc">The HTML fragment or an array of fragments to join(""), or multiple arguments
to join("") that can also include a config object</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code></code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">XTemplate</td>
</tr>
<tr class="method-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-XTemplate.from"></a>
<b>XTemplate.from</b>( <code>String/HTMLElement el</code> ) : Ext.Template <div class="mdesc">
<div class="short"><static> Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.</div>
<div class="long">
<static> Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : String/HTMLElement<div class="sub-desc">A DOM element or its id</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Ext.Template</code><div class="sub-desc">The created template</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">XTemplate</td>
</tr>
<tr class="method-row inherited expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-append"></a>
<b>append</b>( <code>Mixed el</code>, <code>Object/Array values</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">
<div class="short">Applies the supplied values to the template and appends the new node(s) to el.</div>
<div class="long">
Applies the supplied values to the template and appends the new node(s) to el. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>values</code> : Object/Array<div class="sub-desc">The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element (defaults to undefined)</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Template" ext:member="#append" href="output/Ext.Template.html#append">Template</a></td>
</tr>
<tr class="method-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-apply"></a>
<b>apply</b>() : void <div class="mdesc">
<div class="short">Alias of <a ext:cls="Ext.XTemplate" ext:member="applyTemplate" href="output/Ext.XTemplate.html#applyTemplate">applyTemplate</a>.</div>
<div class="long">
Alias of <a ext:cls="Ext.XTemplate" ext:member="applyTemplate" href="output/Ext.XTemplate.html#applyTemplate">applyTemplate</a>. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>void</code></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">XTemplate</td>
</tr>
<tr class="method-row expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-applyTemplate"></a>
<b>applyTemplate</b>( <code>Object values</code> ) : String <div class="mdesc">
<div class="short">Returns an HTML fragment of this template with the specified values applied.</div>
<div class="long">
Returns an HTML fragment of this template with the specified values applied. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>values</code> : Object<div class="sub-desc">The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>String</code><div class="sub-desc">The HTML fragment</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">XTemplate</td>
</tr>
<tr class="method-row alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-compile"></a>
<b>compile</b>() : Function <div class="mdesc">
<div class="short">Compile the template to a function for optimized performance. Recommended if the template will be used frequently.</div>
<div class="long">
Compile the template to a function for optimized performance. Recommended if the template will be used frequently. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li>None.</li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>Function</code><div class="sub-desc">The compiled function</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource">XTemplate</td>
</tr>
<tr class="method-row inherited expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-insertAfter"></a>
<b>insertAfter</b>( <code>Mixed el</code>, <code>Object/Array values</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">
<div class="short">Applies the supplied values to the template and inserts the new node(s) after el.</div>
<div class="long">
Applies the supplied values to the template and inserts the new node(s) after el. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>values</code> : Object/Array<div class="sub-desc">The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element (defaults to undefined)</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Template" ext:member="#insertAfter" href="output/Ext.Template.html#insertAfter">Template</a></td>
</tr>
<tr class="method-row inherited alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-insertBefore"></a>
<b>insertBefore</b>( <code>Mixed el</code>, <code>Object/Array values</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">
<div class="short">Applies the supplied values to the template and inserts the new node(s) before el.</div>
<div class="long">
Applies the supplied values to the template and inserts the new node(s) before el. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>values</code> : Object/Array<div class="sub-desc">The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element (defaults to undefined)</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Template" ext:member="#insertBefore" href="output/Ext.Template.html#insertBefore">Template</a></td>
</tr>
<tr class="method-row inherited expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-insertFirst"></a>
<b>insertFirst</b>( <code>Mixed el</code>, <code>Object/Array values</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">
<div class="short">Applies the supplied values to the template and inserts the new node(s) as the first child of el.</div>
<div class="long">
Applies the supplied values to the template and inserts the new node(s) as the first child of el. <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>values</code> : Object/Array<div class="sub-desc">The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element (defaults to undefined)</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Template" ext:member="#insertFirst" href="output/Ext.Template.html#insertFirst">Template</a></td>
</tr>
<tr class="method-row inherited alt expandable">
<td class="micon"><a class="exi" href="#expand"> </a></td>
<td class="sig">
<a id="Ext.XTemplate-overwrite"></a>
<b>overwrite</b>( <code>Mixed el</code>, <code>Object/Array values</code>, <span class="optional" title="Optional">[<code>Boolean returnElement</code>]</span> ) : HTMLElement/Ext.Element <div class="mdesc">
<div class="short">Applies the supplied values to the template and overwrites the content of el with the new node(s).</div>
<div class="long">
Applies the supplied values to the template and overwrites the content of el with the new node(s). <div class="mdetail-params">
<strong>Parameters:</strong>
<ul><li><code>el</code> : Mixed<div class="sub-desc">The context element</div></li><li><code>values</code> : Object/Array<div class="sub-desc">The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</div></li><li><code>returnElement</code> : Boolean<div class="sub-desc">(optional) true to return a Ext.Element (defaults to undefined)</div></li> </ul>
<strong>Returns:</strong>
<ul>
<li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>
</ul>
</div>
</div>
</div>
</td>
<td class="msource"><a ext:cls="Ext.Template" ext:member="#overwrite" href="output/Ext.Template.html#overwrite">Template</a></td>
</tr>
</table>
<a id="Ext.XTemplate-events"></a>
<h2>Public Events</h2>
<div class="no-members">This class has no public events.</div>
</div>