docs/output/Ext.XTemplate.html

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