- * <pre><code>
-var tpl = new Ext.XTemplate(
- '&lt;p>Kids: ',
- '&lt;tpl <b>for</b>=".">', // process the data.kids node
- '&lt;p>{#}. {name}&lt;/p>', // use current array index to autonumber
- '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
- </code></pre>
- * <p>An example illustrating how the <b><tt>for</tt></b> property can be leveraged
- * to access specified members of the provided data object to populate the template:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
- '&lt;p>Name: {name}&lt;/p>',
- '&lt;p>Title: {title}&lt;/p>',
- '&lt;p>Company: {company}&lt;/p>',
- '&lt;p>Kids: ',
- '&lt;tpl <b>for="kids"</b>>', // interrogate the kids property within the data
- '&lt;p>{name}&lt;/p>',
- '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data); // pass the root node of the data object
- </code></pre>
- * <p>Flat arrays that contain values (and not objects) can be auto-rendered
- * using the special <b><tt>{.}</tt></b> variable inside a loop. This variable
- * will represent the value of the array at the current index:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
- '&lt;p>{name}\&#39;s favorite beverages:&lt;/p>',
- '&lt;tpl for="drinks">',
- '&lt;div> - {.}&lt;/div>',
- '&lt;/tpl>'
-);
-tpl.overwrite(panel.body, data);
- </code></pre>
- * <p>When processing a sub-template, for example while looping through a child array,
- * you can access the parent object's members via the <b><tt>parent</tt></b> object:</p>
- * <pre><code>
-var tpl = new Ext.XTemplate(
- '&lt;p>Name: {name}&lt;/p>',
- '&lt;p>Kids: ',
- '&lt;tpl for="kids">',
- '&lt;tpl if="age &amp;gt; 1">',
- '&lt;p>{name}&lt;/p>',
- '&lt;p>Dad: {<b>parent</b>.name}&lt;/p>',
- '&lt;/tpl>',
- '&lt;/tpl>&lt;/p>'
-);
-tpl.overwrite(panel.body, data);
- </code></pre>
- * </div>
- * </li>
- *
- *
- * <li><b><u>Conditional processing with basic comparison operators</u></b>
- * <div class="sub-desc">
- * <p>The <b><tt>tpl</tt></b> tag and the <b><tt>if</tt></b> operator are used
- * to provide conditional checks for deciding whether or not to render specific
- * parts of the template. Notes:<div class="sub-desc"><ul>
- * <li>Double quotes must be encoded if used within the conditional</li>
- * <li>There is no <tt>else</tt> operator &mdash; if needed, two opposite
- * <tt>if</tt> statements should be used.</li>
- * </ul></div>
- * <pre><code>
-&lt;tpl if="age &gt; 1 &amp;&amp; age &lt; 10">Child&lt;/tpl>
-&lt;tpl if="age >= 10 && age < 18">Teenager&lt;/tpl>
-&lt;tpl <b>if</b>="this.isGirl(name)">...&lt;/tpl>
-&lt;tpl <b>if</b>="id==\'download\'">...&lt;/tpl>
-&lt;tpl <b>if</b>="needsIcon">&lt;img src="{icon}" class="{iconCls}"/>&lt;/tpl>
-// no good:
-&lt;tpl if="name == "Tommy"">Hello&lt;/tpl>
-// encode &#34; if it is part of the condition, e.g.
-&lt;tpl if="name == &#38;quot;Tommy&#38;quot;">Hello&lt;/tpl>
- * </code></pre>
+ *
+ * var tpl = new Ext.XTemplate(
+ * '<p>Kids: ',
+ * '<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
+ *
+ * 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
+ * '<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);
+ *
+ * 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">',
+ * '<p>{name}</p>',
+ * '<p>Dad: {parent.name}</p>',
+ * '</tpl>',
+ * '</tpl></p>'
+ * );
+ * tpl.overwrite(panel.body, data);
+ *
+ * # 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.
+ *
+ * Examples:
+ *
+ * <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 == "Tommy"">Hello</tpl>
+ * // encode " if it is part of the condition, e.g.
+ * <tpl if="name == &quot;Tommy&quot;">Hello</tpl>
+ *