Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / api / Ext.XTemplate.html
diff --git a/docs/api/Ext.XTemplate.html b/docs/api/Ext.XTemplate.html
new file mode 100644 (file)
index 0000000..7c23ff3
--- /dev/null
@@ -0,0 +1,366 @@
+<!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]>
+<style type="text/css">.head-band { display: none; }
+.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
+.doc-tab .members .member a.more { background-color: #efefef; }
+</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
+</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
+<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">
+
+    req = {
+        liveURL: '.',
+        standAloneMode: true,
+        origDocClass: 'Ext.XTemplate',
+        docClass: 'Ext.XTemplate',
+        docReq: 'Ext.XTemplate',
+        version: '4.0',
+        baseURL: '.',
+        baseDocURL: '.',
+        baseProdURL: '.'
+    };
+
+    clsInfo = {};
+
+
+
+</script>
+
+<script type="text/javascript" src="../search.js"></script>
+<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
+<script type="text/javascript" src="../class_tree.js"></script>
+<script type="text/javascript" src="../class_doc.js"></script>
+<script type="text/javascript">
+    req.source = 'XTemplate.html#Ext-XTemplate';
+    clsInfo = {"methods":["append","apply","applyTemplate","compile","from","insertAfter","insertBefore","insertFirst","overwrite","set"],"cfgs":["codeRe","disableFormats"],"properties":[],"events":[],"subclasses":[]};
+    Ext.onReady(function() {
+        Ext.create('Docs.classPanel');
+    });
+</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>
+<li>Autofilling arrays using templates and sub-templates</li>
+<li>Conditional processing with basic comparison operators</li>
+<li>Basic math function support</li>
+<li>Execute arbitrary inline code with special built-in template variables</li>
+<li>Custom member functions</li>
+<li>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</li>
+</ul></div></p>
+
+
+<p>XTemplate provides the templating mechanism built into:<div class="mdetail-params"><ul>
+<li><a href="Ext.view.View.html" rel="Ext.view.View" class="docClass">Ext.view.View</a></li>
+</ul></div></p>
+
+
+<p>The <a href="Ext.Template.html" rel="Ext.Template" class="docClass">Ext.Template</a> describes
+the acceptable parameters to pass to the constructor. The following
+examples demonstrate all of the supported features.</p></p>
+
+<div class="mdetail-params"><ul>
+
+<li><b><u>Sample Data</u></b>
+<div class="sub-desc">
+<p>This is the data object used for reference in each code example:</p>
+<pre class="prettyprint"><code>var data = {
+name: 'Tommy Maintz',
+title: 'Lead Developer',
+company: 'Sencha Inc.',
+email: 'tommy@sencha.com',
+address: '5 Cups Drive',
+city: 'Palo Alto',
+state: 'CA',
+zip: '44102',
+drinks: ['Coffee', 'Soda', 'Water'],
+kids: [{
+        name: 'Joshua',
+        age:3
+    },{
+        name: 'Matthew',
+        age:2
+    },{
+        name: 'Solomon',
+        age:0
+}]
+};
+ </code></pre>
+</div>
+</li>
+
+
+<li><b><u>Auto filling of arrays</u></b>
+<div class="sub-desc">
+<p>The <b><tt>tpl</tt></b> tag and the <b><tt>for</tt></b> operator are used
+to process the provided data object:
+<ul>
+<li>If the value specified in <tt>for</tt> is an array, it will auto-fill,
+repeating the template block inside the <tt>tpl</tt> tag for each item in the
+array.</li>
+<li>If <tt>for="."</tt> is specified, the data object provided is examined.</li>
+<li>While processing an array, the special variable <tt>{#}</tt>
+will provide the current array index + 1 (starts at 1, not 0).</li>
+</ul>
+</p>
+<pre class="prettyprint"><code>&lt;tpl <b>for</b>=".">...&lt;/tpl>       // loop through array at root node
+&lt;tpl <b>for</b>="foo">...&lt;/tpl>     // loop through array at foo node
+&lt;tpl <b>for</b>="foo.bar">...&lt;/tpl> // loop through array at foo.bar node
+ </code></pre>
+Using the sample data above:
+<pre class="prettyprint"><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 class="prettyprint"><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 class="prettyprint"><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 class="prettyprint"><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 class="prettyprint"><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>
+Using the sample data above:
+<pre class="prettyprint"><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;/tpl>',
+    '&lt;/tpl>&lt;/p>'
+);
+tpl.overwrite(panel.body, data);
+ </code></pre>
+</div>
+</li>
+
+
+<li><b><u>Basic math support</u></b>
+<div class="sub-desc">
+<p>The following basic math operators may be applied directly on numeric
+data values:</p>
+<pre class="prettyprint">+ - * /
+</pre>
+For example:
+<pre class="prettyprint"><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">',  // <-- Note that the &gt; is encoded
+            '&lt;p>{#}: {name}&lt;/p>',  // <-- Auto-number each item
+            '&lt;p>In 5 Years: {age+5}&lt;/p>',  // <-- Basic math
+            '&lt;p>Dad: {parent.name}&lt;/p>',
+        '&lt;/tpl>',
+    '&lt;/tpl>&lt;/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>
+</ul>
+This example demonstrates basic row striping using an inline code block and the
+<tt>xindex</tt> variable:</p>
+<pre class="prettyprint"><code>var tpl = new Ext.XTemplate(
+    '&lt;p>Name: {name}&lt;/p>',
+    '&lt;p>Company: {[values.company.toUpperCase() + ", " + values.title]}&lt;/p>',
+    '&lt;p>Kids: ',
+    '&lt;tpl for="kids">',
+        '&lt;div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
+        '{name}',
+        '&lt;/div>',
+    '&lt;/tpl>&lt;/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 class="prettyprint"><code>var tpl = new Ext.XTemplate(
+    '&lt;p>Name: {name}&lt;/p>',
+    '&lt;p>Kids: ',
+    '&lt;tpl for="kids">',
+        '&lt;tpl if="this.isGirl(name)">',
+            '&lt;p>Girl: {name} - {age}&lt;/p>',
+        '&lt;/tpl>',
+         // use opposite if statement to simulate 'else' processing:
+        '&lt;tpl if="this.isGirl(name) == false">',
+            '&lt;p>Boy: {name} - {age}&lt;/p>',
+        '&lt;/tpl>',
+        '&lt;tpl if="this.isBaby(age)">',
+            '&lt;p>{name} is a baby!&lt;/p>',
+        '&lt;/tpl>',
+    '&lt;/tpl>&lt;/p>',
+    {
+        // XTemplate configuration:
+        compiled: 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>
+
+<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>
+</div><div class="long"><p>The regular expression used to match code variables (default: matches <tt>{[expression]}</tt>).</p>
+</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
+disableFo...</div><div class="long"><p>true to disable format functions in the template. If the template doesn't contain format functions, setting
+disableFormats to true will reduce apply time (defaults to false)</p>
+</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>(
+<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
+ : HTMLElement/Ext.core.Element</div><div class="description"><div class="short">Applies the supplied values to the template and appends
+the new node(s) to the specified el.
+
+For example usage see t...</div><div class="long"><p>Applies the supplied <code>values</code> to the template and appends
+the new node(s) to the specified <code>el</code>.</p>
+
+<p>For example usage <a href="Ext.XTemplate.html#Template" rel="Ext.XTemplate#Template" class="docClass">see the constructor</a>.</p>
+
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
+</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>)
+or an object (i.e. <code>{foo: 'bar'}</code>).</p>
+</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>
+</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>
+</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>(
+<span class="pre">Object/Array values</span>)
+ : 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>
+Returns an HTML fragment of this template with the specified values applied.</p>
+</div><div class="long"><p>Alias for <a href="Ext.XTemplate.html#applyTemplate" rel="Ext.XTemplate#applyTemplate" class="docClass">applyTemplate</a>
+Returns an HTML fragment of this template with the specified values applied.</p>
+<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>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The HTML fragment</p>
+</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>(
+<span class="pre">Object values</span>)
+ : String</div><div class="description"><div class="short"><p>Returns an HTML fragment of this template with the specified values applied.</p>
+</div><div class="long"><p>Returns an HTML fragment of this template with the specified values applied.</p>
+<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>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The HTML fragment</p>
+</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>
+</div><div class="long"><p>Compile the template to a function for optimized performance.  Recommended if the template will be used frequently.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Function</span>&nbsp; &nbsp;<p>The compiled function</p>
+</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>(
+<span class="pre">String/HTMLElement el, Object config</span>)
+ : 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>
+</div><div class="long"><p>Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.</p>
+<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>
+</div></li><li><span class="pre">config</span> : Object<div class="sub-desc">
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>The created template</p>
+</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>(
+<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
+ : 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>
+</div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) after el.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
+</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>
+</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>
+</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>
+</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>(
+<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
+ : 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>
+</div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) before el.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
+</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>
+</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>
+</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>
+</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>(
+<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
+ : 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>
+</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>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
+</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>
+</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>
+</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>
+</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>(
+<span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
+ : 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>
+</div><div class="long"><p>Applies the supplied values to the template and overwrites the content of el with the new node(s).</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
+</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>
+</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>
+</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>
+</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>(
+<span class="pre">String html, [Boolean compile]</span>)
+ : Ext.Template</div><div class="description"><div class="short"><p>Sets the HTML used as the template and optionally compiles it.</p>
+</div><div class="long"><p>Sets the HTML used as the template and optionally compiles it.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">html</span> : String<div class="sub-desc">
+</div></li><li><span class="pre">compile</span> : Boolean<div class="sub-desc"><p>(optional) True to compile the template (defaults to undefined)</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>this</p>
+</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>
\ No newline at end of file