The source code

/** + + + + The source code + + + + +

/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+/**
  * @class Ext.XTemplate
  * @extends Ext.Template
- * 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 {@link Ext.DataView}.
- * 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:
+ * A template class that supports advanced functionality like:

+ * Autofilling arrays using templates and sub-templates
+ * Conditional processing with basic comparison operators
+ * Basic math function support
+ * Execute arbitrary inline code with special built-in template variables
+ * Custom member functions
+ * 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
+ * 

+ * XTemplate provides the templating mechanism built into:

+ * {@link Ext.DataView}
+ * {@link Ext.ListView}
+ * {@link Ext.form.ComboBox}
+ * {@link Ext.grid.TemplateColumn}
+ * {@link Ext.grid.GroupingView}
+ * {@link Ext.menu.Item}
+ * {@link Ext.layout.MenuLayout}
+ * {@link Ext.ColorPalette}
+ * 

+ *
+ * For example usage {@link #XTemplate see the constructor}.
+ *
+ * @constructor
+ * The {@link Ext.Template#Template Ext.Template constructor} describes
+ * the acceptable parameters to pass to the constructor. The following
+ * examples demonstrate all of the supported features.
+ *
+ * 
+ *
+ * Sample Data
+ * 
+ * This is the data object used for reference in each code example:
  * 
 var data = {
     name: 'Jack Slocum',
@@ -37,104 +70,161 @@ var data = {
     }]
 };
  * 
- * Auto filling of arrays
The tpl tag and the for operator are used
- * to process the provided data object. If for="." is specified, the data object provided
- * is examined. If the variable in for is an array, it will auto-fill, repeating the template
- * block inside the tpl tag for each item in the array:
+ * 
+ * 
+ *
+ *
+ * Auto filling of arrays
+ * 
+ * The tpl tag and the for operator are used
+ * to process the provided data object:
+ * 

+ * If the value specified in for is an array, it will auto-fill,
+ * repeating the template block inside the tpl tag for each item in the
+ * array.
+ * If for="." is specified, the data object provided is examined.
+ * While processing an array, the special variable {#}
+ * will provide the current array index + 1 (starts at 1, not 0).
+ * 
+ * 
+ * 
+<tpl for=".">...</tpl>       // loop through array at root node
+<tpl for="foo">...</tpl>     // loop through array at foo node
+<tpl for="foo.bar">...</tpl> // loop through array at foo.bar node
+ * 
+ * Using the sample data above:
  * 
 var tpl = new Ext.XTemplate(
     '<p>Kids: ',
-    '<tpl for=".">',
-        '<p>{name}</p>',
+    '<tpl for=".">',       // process the data.kids node
+        '<p>{#}. {name}</p>',  // use current array index to autonumber
     '</tpl></p>'
 );
 tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
  * 
- * Scope switching
The for property can be leveraged to access specified members
- * of the provided data object to populate the template:
+ * An example illustrating how the for property can be leveraged
+ * to access specified members of the provided data object to populate the template:
  * 
 var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Title: {title}</p>',
     '<p>Company: {company}</p>',
     '<p>Kids: ',
-    '<tpl for="kids">', // interrogate the kids property within the data
+    '<tpl for="kids">',     // interrogate the kids property within the data
         '<p>{name}</p>',
     '</tpl></p>'
 );
+tpl.overwrite(panel.body, data);  // pass the root node of the data object
+ * 
+ * Flat arrays that contain values (and not objects) can be auto-rendered
+ * using the special {.} variable inside a loop.  This variable
+ * will represent the value of the array at the current index:
+ * 
+var tpl = new Ext.XTemplate(
+    '<p>{name}\'s favorite beverages:</p>',
+    '<tpl for="drinks">',
+       '<div> - {.}</div>',
+    '</tpl>'
+);
 tpl.overwrite(panel.body, data);
  * 
- * Access to parent object from within sub-template scope
When processing a sub-template, for example while
- * looping through a child array, you can access the parent object's members via the parent object:
+ * When processing a sub-template, for example while looping through a child array,
+ * you can access the parent object's members via the parent object:
  * 
 var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Kids: ',
     '<tpl for="kids">',
-        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
+        '<tpl if="age > 1">',
             '<p>{name}</p>',
-            '<p>Dad: {parent.name}</p>',
+            '<p>Dad: {parent.name}</p>',
         '</tpl>',
     '</tpl></p>'
 );
 tpl.overwrite(panel.body, data);
-
- * Array item index and basic math support 
While processing an array, the special variable {#}
- * 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:
+ *

+ * + * + * + * + *

Conditional processing with basic comparison operators + *

+ *

The tpl tag and the if operator are used + * to provide conditional checks for deciding whether or not to render specific + * parts of the template. Notes:

Double quotes must be encoded if used within the conditional
There is no else operator — if needed, two opposite + * if statements should be used.

+ *


+<tpl if="age > 1 && age < 10">Child</tpl>
+<tpl if="age >= 10 && age < 18">Teenager</tpl>
+<tpl if="this.isGirl(name)">...</tpl>
+<tpl if="id==\'download\'">...</tpl>
+<tpl if="needsIcon"><img src="{icon}" class="{iconCls}"/></tpl>
+// no good:
+<tpl if="name == "Jack"">Hello</tpl>
+// encode " if it is part of the condition, e.g.
+<tpl if="name == &quot;Jack&quot;">Hello</tpl>
+ *

+ * Using the sample data above: *


 var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Kids: ',
     '<tpl for="kids">',
-        '<tpl if="age &gt; 1">',  // <-- Note that the > is encoded
-            '<p>{#}: {name}</p>',  // <-- Auto-number each item
-            '<p>In 5 Years: {age+5}</p>',  // <-- Basic math
-            '<p>Dad: {parent.name}</p>',
+        '<tpl if="age > 1">',
+            '<p>{name}</p>',
         '</tpl>',
     '</tpl></p>'
 );
 tpl.overwrite(panel.body, data);
-

- *

Auto-rendering of flat arrays
Flat arrays that contain values (and not objects) can be auto-rendered - * using the special {.} variable inside a loop. This variable will represent the value of - * the array at the current index:

- *


-var tpl = new Ext.XTemplate(
-    '<p>{name}\'s favorite beverages:</p>',
-    '<tpl for="drinks">',
-       '<div> - {.}</div>',
-    '</tpl>'
-);
-tpl.overwrite(panel.body, data);
-

- *

Basic conditional logic
Using the tpl tag and the if - * operator you can provide conditional checks for deciding whether or not to render specific parts of the template. - * Note that there is no else operator — if needed, you should use two opposite if statements. - * Properly-encoded attributes are required as seen in the following example:

+ *

var tpl = new Ext.XTemplate( 'Name: {name}', 'Kids: ', '<tpl for="kids">', '<tpl if="age > 1">', // <-- Note that the > is encoded - '{name}', + '{#}: {name}', // <-- Auto-number each item + 'In 5 Years: {age+5}', // <-- Basic math + 'Dad: {parent.name}', '</tpl>', '</tpl>' ); tpl.overwrite(panel.body, data);