docs/api/Ext.XTemplate.html

   1 <!DOCTYPE html><html><head><title>Ext.XTemplate | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.XTemplate',
  13         docClass: 'Ext.XTemplate',
  14         docReq: 'Ext.XTemplate',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'XTemplate.html#Ext-XTemplate';
  33     clsInfo = {"methods":["append","apply","applyTemplate","compile","from","insertAfter","insertBefore","insertFirst","overwrite","set"],"cfgs":["codeRe","disableFormats"],"properties":[],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/XTemplate.html#Ext-XTemplate" target="_blank">Ext.XTemplate</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><pre class="subclasses"><h4>Hierarchy</h4><div class="subclass f"><a href="Ext.Template.html" rel="Ext.Template" class="cls docClass">Ext.Template</a><div class="subclass"><strong>Ext.XTemplate</strong></div></div></pre><p>A template class that supports advanced functionality like:<div class="mdetail-params"><ul>
  38 <li>Autofilling arrays using templates and sub-templates</li>
  39 <li>Conditional processing with basic comparison operators</li>
  40 <li>Basic math function support</li>
  41 <li>Execute arbitrary inline code with special built-in template variables</li>
  42 <li>Custom member functions</li>
  43 <li>Many special tags and built-in operators that aren't defined as part of
  44 the API, but are supported in the templates that can be created</li>
  45 </ul></div></p>
  46
  47
  48 <p>XTemplate provides the templating mechanism built into:<div class="mdetail-params"><ul>
  49 <li><a href="Ext.view.View.html" rel="Ext.view.View" class="docClass">Ext.view.View</a></li>
  50 </ul></div></p>
  51
  52
  53 <p>The <a href="Ext.Template.html" rel="Ext.Template" class="docClass">Ext.Template</a> describes
  54 the acceptable parameters to pass to the constructor. The following
  55 examples demonstrate all of the supported features.</p></p>
  56
  57 <div class="mdetail-params"><ul>
  58
  59 <li><b><u>Sample Data</u></b>
  60 <div class="sub-desc">
  61 <p>This is the data object used for reference in each code example:</p>
  62 <pre class="prettyprint"><code>var data = {
  63 name: 'Tommy Maintz',
  64 title: 'Lead Developer',
  65 company: 'Sencha Inc.',
  66 email: 'tommy@sencha.com',
  67 address: '5 Cups Drive',
  68 city: 'Palo Alto',
  69 state: 'CA',
  70 zip: '44102',
  71 drinks: ['Coffee', 'Soda', 'Water'],
  72 kids: [{
  73         name: 'Joshua',
  74         age:3
  75     },{
  76         name: 'Matthew',
  77         age:2
  78     },{
  79         name: 'Solomon',
  80         age:0
  81 }]
  82 };
  83  </code></pre>
  84 </div>
  85 </li>
  86
  87
  88 <li><b><u>Auto filling of arrays</u></b>
  89 <div class="sub-desc">
  90 <p>The <b><tt>tpl</tt></b> tag and the <b><tt>for</tt></b> operator are used
  91 to process the provided data object:
  92 <ul>
  93 <li>If the value specified in <tt>for</tt> is an array, it will auto-fill,
  94 repeating the template block inside the <tt>tpl</tt> tag for each item in the
  95 array.</li>
  96 <li>If <tt>for="."</tt> is specified, the data object provided is examined.</li>
  97 <li>While processing an array, the special variable <tt>{#}</tt>
  98 will provide the current array index + 1 (starts at 1, not 0).</li>
  99 </ul>
 100 </p>
 101 <pre class="prettyprint"><code>&lt;tpl <b>for</b>=".">...&lt;/tpl>       // loop through array at root node
 102 &lt;tpl <b>for</b>="foo">...&lt;/tpl>     // loop through array at foo node
 103 &lt;tpl <b>for</b>="foo.bar">...&lt;/tpl> // loop through array at foo.bar node
 104  </code></pre>
 105 Using the sample data above:
 106 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 107     '&lt;p>Kids: ',
 108     '&lt;tpl <b>for</b>=".">',       // process the data.kids node
 109         '&lt;p>{#}. {name}&lt;/p>',  // use current array index to autonumber
 110     '&lt;/tpl>&lt;/p>'
 111 );
 112 tpl.overwrite(panel.body, data.kids); // pass the kids property of the data object
 113  </code></pre>
 114 <p>An example illustrating how the <b><tt>for</tt></b> property can be leveraged
 115 to access specified members of the provided data object to populate the template:</p>
 116 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 117     '&lt;p>Name: {name}&lt;/p>',
 118     '&lt;p>Title: {title}&lt;/p>',
 119     '&lt;p>Company: {company}&lt;/p>',
 120     '&lt;p>Kids: ',
 121     '&lt;tpl <b>for="kids"</b>>',     // interrogate the kids property within the data
 122         '&lt;p>{name}&lt;/p>',
 123     '&lt;/tpl>&lt;/p>'
 124 );
 125 tpl.overwrite(panel.body, data);  // pass the root node of the data object
 126  </code></pre>
 127 <p>Flat arrays that contain values (and not objects) can be auto-rendered
 128 using the special <b><tt>{.}</tt></b> variable inside a loop.  This variable
 129 will represent the value of the array at the current index:</p>
 130 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 131     '&lt;p>{name}\&#39;s favorite beverages:&lt;/p>',
 132     '&lt;tpl for="drinks">',
 133         '&lt;div> - {.}&lt;/div>',
 134     '&lt;/tpl>'
 135 );
 136 tpl.overwrite(panel.body, data);
 137  </code></pre>
 138 <p>When processing a sub-template, for example while looping through a child array,
 139 you can access the parent object's members via the <b><tt>parent</tt></b> object:</p>
 140 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 141     '&lt;p>Name: {name}&lt;/p>',
 142     '&lt;p>Kids: ',
 143     '&lt;tpl for="kids">',
 144         '&lt;tpl if="age &amp;gt; 1">',
 145             '&lt;p>{name}&lt;/p>',
 146             '&lt;p>Dad: {<b>parent</b>.name}&lt;/p>',
 147         '&lt;/tpl>',
 148     '&lt;/tpl>&lt;/p>'
 149 );
 150 tpl.overwrite(panel.body, data);
 151  </code></pre>
 152 </div>
 153 </li>
 154
 155
 156 <li><b><u>Conditional processing with basic comparison operators</u></b>
 157 <div class="sub-desc">
 158 <p>The <b><tt>tpl</tt></b> tag and the <b><tt>if</tt></b> operator are used
 159 to provide conditional checks for deciding whether or not to render specific
 160 parts of the template. Notes:<div class="sub-desc"><ul>
 161 <li>Double quotes must be encoded if used within the conditional</li>
 162 <li>There is no <tt>else</tt> operator &mdash; if needed, two opposite
 163 <tt>if</tt> statements should be used.</li>
 164 </ul></div>
 165 <pre class="prettyprint"><code>&lt;tpl if="age &gt; 1 &amp;&amp; age &lt; 10">Child&lt;/tpl>
 166 &lt;tpl if="age >= 10 && age < 18">Teenager&lt;/tpl>
 167 &lt;tpl <b>if</b>="this.isGirl(name)">...&lt;/tpl>
 168 &lt;tpl <b>if</b>="id==\'download\'">...&lt;/tpl>
 169 &lt;tpl <b>if</b>="needsIcon">&lt;img src="{icon}" class="{iconCls}"/>&lt;/tpl>
 170 // no good:
 171 &lt;tpl if="name == "Tommy"">Hello&lt;/tpl>
 172 // encode &#34; if it is part of the condition, e.g.
 173 &lt;tpl if="name == &#38;quot;Tommy&#38;quot;">Hello&lt;/tpl>
 174 </code></pre>
 175 Using the sample data above:
 176 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 177     '&lt;p>Name: {name}&lt;/p>',
 178     '&lt;p>Kids: ',
 179     '&lt;tpl for="kids">',
 180         '&lt;tpl if="age &amp;gt; 1">',
 181             '&lt;p>{name}&lt;/p>',
 182         '&lt;/tpl>',
 183     '&lt;/tpl>&lt;/p>'
 184 );
 185 tpl.overwrite(panel.body, data);
 186  </code></pre>
 187 </div>
 188 </li>
 189
 190
 191 <li><b><u>Basic math support</u></b>
 192 <div class="sub-desc">
 193 <p>The following basic math operators may be applied directly on numeric
 194 data values:</p>
 195 <pre class="prettyprint">+ - * /
 196 </pre>
 197 For example:
 198 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 199     '&lt;p>Name: {name}&lt;/p>',
 200     '&lt;p>Kids: ',
 201     '&lt;tpl for="kids">',
 202         '&lt;tpl if="age &amp;gt; 1">',  // <-- Note that the &gt; is encoded
 203             '&lt;p>{#}: {name}&lt;/p>',  // <-- Auto-number each item
 204             '&lt;p>In 5 Years: {age+5}&lt;/p>',  // <-- Basic math
 205             '&lt;p>Dad: {parent.name}&lt;/p>',
 206         '&lt;/tpl>',
 207     '&lt;/tpl>&lt;/p>'
 208 );
 209 tpl.overwrite(panel.body, data);
 210  </code></pre>
 211 </div>
 212 </li>
 213
 214
 215 <li><b><u>Execute arbitrary inline code with special built-in template variables</u></b>
 216 <div class="sub-desc">
 217 <p>Anything between <code>{[ ... ]}</code> is considered code to be executed
 218 in the scope of the template. There are some special variables available in that code:
 219 <ul>
 220 <li><b><tt>values</tt></b>: The values in the current scope. If you are using
 221 scope changing sub-templates, you can change what <tt>values</tt> is.</li>
 222 <li><b><tt>parent</tt></b>: The scope (values) of the ancestor template.</li>
 223 <li><b><tt>xindex</tt></b>: If you are in a looping template, the index of the
 224 loop you are in (1-based).</li>
 225 <li><b><tt>xcount</tt></b>: If you are in a looping template, the total length
 226 of the array you are looping.</li>
 227 </ul>
 228 This example demonstrates basic row striping using an inline code block and the
 229 <tt>xindex</tt> variable:</p>
 230 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 231     '&lt;p>Name: {name}&lt;/p>',
 232     '&lt;p>Company: {[values.company.toUpperCase() + ", " + values.title]}&lt;/p>',
 233     '&lt;p>Kids: ',
 234     '&lt;tpl for="kids">',
 235         '&lt;div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
 236         '{name}',
 237         '&lt;/div>',
 238     '&lt;/tpl>&lt;/p>'
 239  );
 240 tpl.overwrite(panel.body, data);
 241  </code></pre>
 242 </div>
 243 </li>
 244
 245 <li><b><u>Template member functions</u></b>
 246 <div class="sub-desc">
 247 <p>One or more member functions can be specified in a configuration
 248 object passed into the XTemplate constructor for more complex processing:</p>
 249 <pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
 250     '&lt;p>Name: {name}&lt;/p>',
 251     '&lt;p>Kids: ',
 252     '&lt;tpl for="kids">',
 253         '&lt;tpl if="this.isGirl(name)">',
 254             '&lt;p>Girl: {name} - {age}&lt;/p>',
 255         '&lt;/tpl>',
 256          // use opposite if statement to simulate 'else' processing:
 257         '&lt;tpl if="this.isGirl(name) == false">',
 258             '&lt;p>Boy: {name} - {age}&lt;/p>',
 259         '&lt;/tpl>',
 260         '&lt;tpl if="this.isBaby(age)">',
 261             '&lt;p>{name} is a baby!&lt;/p>',
 262         '&lt;/tpl>',
 263     '&lt;/tpl>&lt;/p>',
 264     {
 265         // XTemplate configuration:
 266         compiled: true,
 267         // member functions:
 268         isGirl: function(name){
 269            return name == 'Sara Grace';
 270         },
 271         isBaby: function(age){
 272            return age < 1;
 273         }
 274     }
 275 );
 276 tpl.overwrite(panel.body, data);
 277  </code></pre>
 278 </div>
 279 </li>
 280
 281 </ul></div>
 282
 283 <div class="members"><div class="m-cfgs"><div class="definedBy">Defined By</div><a name="configs"></a><h3 class="cfg p">Config Options</h3><h4 class="cfgGroup">Other Configs</h4><div id="config-codeRe" class="member f ni"><a href="Ext.XTemplate.html#config-codeRe" rel="config-codeRe" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-cfg-codeRe" class="viewSource">view source</a></div><a name="codeRe"></a><a name="config-codeRe"></a><a href="Ext.XTemplate.html#" rel="config-codeRe" class="cls expand">codeRe</a><span> : RegExp</span></div><div class="description"><div class="short"><p>The regular expression used to match code variables (default: matches <tt>{[expression]}</tt>).</p>
 284 </div><div class="long"><p>The regular expression used to match code variables (default: matches <tt>{[expression]}</tt>).</p>
 285 </div></div></div><div id="config-disableFormats" class="member inherited"><a href="Ext.XTemplate.html#config-disableFormats" rel="config-disableFormats" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-cfg-disableFormats" class="viewSource">view source</a></div><a name="disableFormats"></a><a name="config-disableFormats"></a><a href="Ext.XTemplate.html#" rel="config-disableFormats" class="cls expand">disableFormats</a><span> : Boolean</span></div><div class="description"><div class="short">true to disable format functions in the template. If the template doesn't contain format functions, setting
 286 disableFo...</div><div class="long"><p>true to disable format functions in the template. If the template doesn't contain format functions, setting
 287 disableFormats to true will reduce apply time (defaults to false)</p>
 288 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-append" class="member f inherited"><a href="Ext.XTemplate.html#method-append" rel="method-append" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-append" class="viewSource">view source</a></div><a name="append"></a><a name="method-append"></a><a href="Ext.XTemplate.html#" rel="method-append" class="cls expand">append</a>(
 289 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 290  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short">Applies the supplied values to the template and appends
 291 the new node(s) to the specified el.
 292
 293 For example usage see t...</div><div class="long"><p>Applies the supplied <code>values</code> to the template and appends
 294 the new node(s) to the specified <code>el</code>.</p>
 295
 296 <p>For example usage <a href="Ext.XTemplate.html#Template" rel="Ext.XTemplate#Template" class="docClass">see the constructor</a>.</p>
 297
 298 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 299 </div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if the params are numeric (i.e. <code>{0}</code>)
 300 or an object (i.e. <code>{foo: 'bar'}</code>).</p>
 301 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
 302 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
 303 </li></ul></div></div></div><div id="method-apply" class="member ni"><a href="Ext.XTemplate.html#method-apply" rel="method-apply" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-apply" class="viewSource">view source</a></div><a name="apply"></a><a name="method-apply"></a><a href="Ext.XTemplate.html#" rel="method-apply" class="cls expand">apply</a>(
 304 <span class="pre">Object/Array values</span>)
 305  : String</div><div class="description"><div class="short"><p>Alias for <a href="Ext.XTemplate.html#applyTemplate" rel="Ext.XTemplate#applyTemplate" class="docClass">applyTemplate</a>
 306 Returns an HTML fragment of this template with the specified values applied.</p>
 307 </div><div class="long"><p>Alias for <a href="Ext.XTemplate.html#applyTemplate" rel="Ext.XTemplate#applyTemplate" class="docClass">applyTemplate</a>
 308 Returns an HTML fragment of this template with the specified values applied.</p>
 309 <h3 class="pa">Parameters</h3><ul><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
 310 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The HTML fragment</p>
 311 </li></ul></div></div></div><div id="method-applyTemplate" class="member ni"><a href="Ext.XTemplate.html#method-applyTemplate" rel="method-applyTemplate" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-applyTemplate" class="viewSource">view source</a></div><a name="applyTemplate"></a><a name="method-applyTemplate"></a><a href="Ext.XTemplate.html#" rel="method-applyTemplate" class="cls expand">applyTemplate</a>(
 312 <span class="pre">Object values</span>)
 313  : String</div><div class="description"><div class="short"><p>Returns an HTML fragment of this template with the specified values applied.</p>
 314 </div><div class="long"><p>Returns an HTML fragment of this template with the specified values applied.</p>
 315 <h3 class="pa">Parameters</h3><ul><li><span class="pre">values</span> : Object<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
 316 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The HTML fragment</p>
 317 </li></ul></div></div></div><div id="method-compile" class="member ni"><a href="Ext.XTemplate.html#method-compile" rel="method-compile" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-compile" class="viewSource">view source</a></div><a name="compile"></a><a name="method-compile"></a><a href="Ext.XTemplate.html#" rel="method-compile" class="cls expand">compile</a> : Function</div><div class="description"><div class="short"><p>Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.</p>
 318 </div><div class="long"><p>Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.</p>
 319 <h3 class="pa">Returns</h3><ul><li><span class="pre">Function</span>&nbsp; &nbsp;<p>The compiled function</p>
 320 </li></ul></div></div></div><div id="method-from" class="member ni"><a href="Ext.XTemplate.html#method-from" rel="method-from" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.XTemplate.html" class="definedIn docClass">Ext.XTemplate</a><br/><a href="../source/XTemplate.html#Ext-XTemplate-method-from" class="viewSource">view source</a></div><a name="from"></a><a name="method-from"></a><a href="Ext.XTemplate.html#" rel="method-from" class="cls expand">from</a>(
 321 <span class="pre">String/HTMLElement el, Object config</span>)
 322  : Ext.Template</div><div class="description"><div class="short"><p>Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.</p>
 323 </div><div class="long"><p>Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.</p>
 324 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : String/HTMLElement<div class="sub-desc"><p>A DOM element or its id</p>
 325 </div></li><li><span class="pre">config</span> : Object<div class="sub-desc">
 326 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>The created template</p>
 327 </li></ul></div></div></div><div id="method-insertAfter" class="member inherited"><a href="Ext.XTemplate.html#method-insertAfter" rel="method-insertAfter" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-insertAfter" class="viewSource">view source</a></div><a name="insertAfter"></a><a name="method-insertAfter"></a><a href="Ext.XTemplate.html#" rel="method-insertAfter" class="cls expand">insertAfter</a>(
 328 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 329  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and inserts the new node(s) after el.</p>
 330 </div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) after el.</p>
 331 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 332 </div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
 333 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
 334 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
 335 </li></ul></div></div></div><div id="method-insertBefore" class="member inherited"><a href="Ext.XTemplate.html#method-insertBefore" rel="method-insertBefore" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-insertBefore" class="viewSource">view source</a></div><a name="insertBefore"></a><a name="method-insertBefore"></a><a href="Ext.XTemplate.html#" rel="method-insertBefore" class="cls expand">insertBefore</a>(
 336 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 337  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and inserts the new node(s) before el.</p>
 338 </div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) before el.</p>
 339 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 340 </div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
 341 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
 342 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
 343 </li></ul></div></div></div><div id="method-insertFirst" class="member inherited"><a href="Ext.XTemplate.html#method-insertFirst" rel="method-insertFirst" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-insertFirst" class="viewSource">view source</a></div><a name="insertFirst"></a><a name="method-insertFirst"></a><a href="Ext.XTemplate.html#" rel="method-insertFirst" class="cls expand">insertFirst</a>(
 344 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 345  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and inserts the new node(s) as the first child of el.</p>
 346 </div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) as the first child of el.</p>
 347 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 348 </div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
 349 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
 350 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
 351 </li></ul></div></div></div><div id="method-overwrite" class="member inherited"><a href="Ext.XTemplate.html#method-overwrite" rel="method-overwrite" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-overwrite" class="viewSource">view source</a></div><a name="overwrite"></a><a name="method-overwrite"></a><a href="Ext.XTemplate.html#" rel="method-overwrite" class="cls expand">overwrite</a>(
 352 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 353  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short"><p>Applies the supplied values to the template and overwrites the content of el with the new node(s).</p>
 354 </div><div class="long"><p>Applies the supplied values to the template and overwrites the content of el with the new node(s).</p>
 355 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 356 </div></li><li><span class="pre">values</span> : Object/Array<div class="sub-desc"><p>The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})</p>
 357 </div></li><li><span class="pre">returnElement</span> : Boolean<div class="sub-desc"><p>(optional) true to return a <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a> (defaults to undefined)</p>
 358 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">HTMLElement/Ext.core.Element</span>&nbsp; &nbsp;<p>The new node or Element</p>
 359 </li></ul></div></div></div><div id="method-set" class="member inherited"><a href="Ext.XTemplate.html#method-set" rel="method-set" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.Template.html" class="definedIn docClass">Ext.Template</a><br/><a href="../source/Template2.html#Ext-Template-method-set" class="viewSource">view source</a></div><a name="set"></a><a name="method-set"></a><a href="Ext.XTemplate.html#" rel="method-set" class="cls expand">set</a>(
 360 <span class="pre">String html, [Boolean compile]</span>)
 361  : Ext.Template</div><div class="description"><div class="short"><p>Sets the HTML used as the template and optionally compiles it.</p>
 362 </div><div class="long"><p>Sets the HTML used as the template and optionally compiles it.</p>
 363 <h3 class="pa">Parameters</h3><ul><li><span class="pre">html</span> : String<div class="sub-desc">
 364 </div></li><li><span class="pre">compile</span> : Boolean<div class="sub-desc"><p>(optional) True to compile the template (defaults to undefined)</p>
 365 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>this</p>
 366 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>