- * <pre><code>
-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>',
- '</tpl></p>'
-);
-tpl.overwrite(panel.body, data);
-</code></pre>
- * </div>
- * </li>
- *
- *
- * <li><b><u>Execute arbitrary inline code with special built-in template variables</u></b>
- * <div class="sub-desc">
- * <p>Anything between <code>{[ ... ]}</code> 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 = new Ext.XTemplate(
- '<p>Name: {name}</p>',
- '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
- '<p>Kids: ',
- '<tpl for="kids">',
- '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
- '{name}',
- '</div>',
- '</tpl></p>'
-);
-tpl.overwrite(panel.body, data);
- * </code></pre>
- * </div>
- * </li>
- *
- * <li><b><u>Template member functions</u></b>
- * <div class="sub-desc">
- * <p>One or more member functions can be specified in a configuration
- * object passed into the XTemplate constructor for more complex processing:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
- '<p>Name: {name}</p>',
- '<p>Kids: ',
- '<tpl for="kids">',
- '<tpl if="this.isGirl(name)">',
- '<p>Girl: {name} - {age}</p>',
- '</tpl>',
- // use opposite if statement to simulate 'else' processing:
- '<tpl if="this.isGirl(name) == false">',
- '<p>Boy: {name} - {age}</p>',
- '</tpl>',
- '<tpl if="this.isBaby(age)">',
- '<p>{name} is a baby!</p>',
- '</tpl>',
- '</tpl></p>',
- {
- // XTemplate configuration:
- compiled: true,
- disableFormats: true,
- // member functions:
- isGirl: function(name){
- return name == 'Sara Grace';
- },
- isBaby: function(age){
- return age < 1;
- }
- }
-);
-tpl.overwrite(panel.body, data);
- * </code></pre>
- * </div>
- * </li>
- *
- * </ul></div>
- *
- * @param {Mixed} config
+ *
+ * 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>',
+ * '</tpl></p>'
+ * );
+ * tpl.overwrite(panel.body, data);
+ *
+ * # Execute arbitrary inline code with special built-in template variables
+ *
+ * Anything between `{[ ... ]}` is considered code to be executed in the scope of the template. There are some special
+ * variables available in that code:
+ *
+ * - **values**: The values in the current scope. If you are using scope changing sub-templates,
+ * you can change what values is.
+ * - **parent**: The scope (values) of the ancestor template.
+ * - **xindex**: If you are in a looping template, the index of the loop you are in (1-based).
+ * - **xcount**: If you are in a looping template, the total length of the array you are looping.
+ *
+ * This example demonstrates basic row striping using an inline code block and the xindex variable:
+ *
+ * var tpl = new Ext.XTemplate(
+ * '<p>Name: {name}</p>',
+ * '<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
+ * '<p>Kids: ',
+ * '<tpl for="kids">',
+ * '<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
+ * '{name}',
+ * '</div>',
+ * '</tpl></p>'
+ * );
+ * tpl.overwrite(panel.body, data);
+ *
+ * # Template member functions
+ *
+ * One or more member functions can be specified in a configuration object passed into the XTemplate constructor for
+ * more complex processing:
+ *
+ * var tpl = new Ext.XTemplate(
+ * '<p>Name: {name}</p>',
+ * '<p>Kids: ',
+ * '<tpl for="kids">',
+ * '<tpl if="this.isGirl(name)">',
+ * '<p>Girl: {name} - {age}</p>',
+ * '</tpl>',
+ * // use opposite if statement to simulate 'else' processing:
+ * '<tpl if="this.isGirl(name) == false">',
+ * '<p>Boy: {name} - {age}</p>',
+ * '</tpl>',
+ * '<tpl if="this.isBaby(age)">',
+ * '<p>{name} is a baby!</p>',
+ * '</tpl>',
+ * '</tpl></p>',
+ * {
+ * // XTemplate configuration:
+ * disableFormats: true,
+ * // member functions:
+ * isGirl: function(name){
+ * return name == 'Sara Grace';
+ * },
+ * isBaby: function(age){
+ * return age < 1;
+ * }
+ * }
+ * );
+ * tpl.overwrite(panel.body, data);