docs/api/Ext.Template.html

   1 <!DOCTYPE html><html><head><title>Ext.Template | 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.Template',
  13         docClass: 'Ext.Template',
  14         docReq: 'Ext.Template',
  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 = 'Template2.html#Ext-Template';
  33     clsInfo = {"methods":["append","apply","from","insertAfter","insertBefore","insertFirst","overwrite","set"],"cfgs":["disableFormats"],"properties":[],"events":[],"subclasses":["Ext.XTemplate"]};
  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/Template2.html#Ext-Template" target="_blank">Ext.Template</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>Represents an HTML fragment template. Templates may be <a href="Ext.Template.html#compile" rel="Ext.Template#compile" class="docClass">precompiled</a>
  38 for greater performance.</p>
  39
  40
  41 <p>An instance of this class may be created by passing to the constructor either
  42 a single argument, or multiple arguments:</p>
  43
  44 <div class="mdetail-params"><ul>
  45 <li><b>single argument</b> : String/Array
  46 <div class="sub-desc">
  47 The single argument may be either a String or an Array:<ul>
  48 <li><tt>String</tt> : </li>
  49 <pre class="prettyprint"><code>var t = new Ext.Template("&lt;div>Hello {0}.&lt;/div>");
  50 t.<a href="Ext.Template.html#append" rel="Ext.Template#append" class="docClass">append</a>('some-element', ['foo']);
  51    </code></pre>
  52 <li><tt>Array</tt> : </li>
  53 An Array will be combined with <code>join('')</code>.
  54 <pre class="prettyprint"><code>var t = new Ext.Template([
  55     '&lt;div name="{id}"&gt;',
  56         '&lt;span class="{cls}"&gt;{name:trim} {value:ellipsis(10)}&lt;/span&gt;',
  57     '&lt;/div&gt;',
  58 ]);
  59 t.<a href="Ext.Template.html#compile" rel="Ext.Template#compile" class="docClass">compile</a>();
  60 t.<a href="Ext.Template.html#append" rel="Ext.Template#append" class="docClass">append</a>('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
  61    </code></pre>
  62 </ul></div></li>
  63 <li><b>multiple arguments</b> : String, Object, Array, ...
  64 <div class="sub-desc">
  65 Multiple arguments will be combined with <code>join('')</code>.
  66 <pre class="prettyprint"><code>var t = new Ext.Template(
  67     '&lt;div name="{id}"&gt;',
  68         '&lt;span class="{cls}"&gt;{name} {value}&lt;/span&gt;',
  69     '&lt;/div&gt;',
  70     // a configuration object:
  71     {
  72         compiled: true,      // <a href="Ext.Template.html#compile" rel="Ext.Template#compile" class="docClass">compile</a> immediately
  73     }
  74 );
  75    </code></pre>
  76 <p><b>Notes</b>:</p>
  77 <div class="mdetail-params"><ul>
  78 <li>For a list of available format functions, see <a href="Ext.util.Format.html" rel="Ext.util.Format" class="docClass">Ext.util.Format</a>.</li>
  79 <li><code>disableFormats</code> reduces <code><a href="Ext.Template.html#apply" rel="Ext.Template#apply" class="docClass">apply</a></code> time
  80 when no formatting is required.</li>
  81 </ul></div>
  82 </div></li>
  83 </ul></div>
  84
  85 <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-disableFormats" class="member f ni"><a href="Ext.Template.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.Template.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
  86 disableFo...</div><div class="long"><p>true to disable format functions in the template. If the template doesn't contain format functions, setting
  87 disableFormats to true will reduce apply time (defaults to false)</p>
  88 </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 ni"><a href="Ext.Template.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.Template.html#" rel="method-append" class="cls expand">append</a>(
  89 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
  90  : HTMLElement/Ext.core.Element</div><div class="description"><div class="short">Applies the supplied values to the template and appends
  91 the new node(s) to the specified el.
  92
  93 For example usage see t...</div><div class="long"><p>Applies the supplied <code>values</code> to the template and appends
  94 the new node(s) to the specified <code>el</code>.</p>
  95
  96 <p>For example usage <a href="Ext.Template.html#Template" rel="Ext.Template#Template" class="docClass">see the constructor</a>.</p>
  97
  98 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
  99 </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>)
 100 or an object (i.e. <code>{foo: 'bar'}</code>).</p>
 101 </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>
 102 </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>
 103 </li></ul></div></div></div><div id="method-apply" class="member ni"><a href="Ext.Template.html#method-apply" rel="method-apply" 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-apply" class="viewSource">view source</a></div><a name="apply"></a><a name="method-apply"></a><a href="Ext.Template.html#" rel="method-apply" class="cls expand">apply</a>(
 104 <span class="pre">Object/Array values</span>)
 105  : String</div><div class="description"><div class="short"><p>Alias for <a href="Ext.Template.html#applyTemplate" rel="Ext.Template#applyTemplate" class="docClass">applyTemplate</a>
 106 Returns an HTML fragment of this template with the specified <code>values</code> applied.</p>
 107 </div><div class="long"><p>Alias for <a href="Ext.Template.html#applyTemplate" rel="Ext.Template#applyTemplate" class="docClass">applyTemplate</a>
 108 Returns an HTML fragment of this template with the specified <code>values</code> applied.</p>
 109 <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 the params are numeric (i.e. <code>{0}</code>)
 110 or an object (i.e. <code>{foo: 'bar'}</code>).</p>
 111 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">String</span>&nbsp; &nbsp;<p>The HTML fragment</p>
 112 </li></ul></div></div></div><div id="method-from" class="member ni"><a href="Ext.Template.html#method-from" rel="method-from" 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-from" class="viewSource">view source</a></div><a name="from"></a><a name="method-from"></a><a href="Ext.Template.html#" rel="method-from" class="cls expand">from</a>(
 113 <span class="pre">String/HTMLElement el, Object config</span>)
 114  : 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>
 115 </div><div class="long"><p>Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.</p>
 116 <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>
 117 </div></li><li><span class="pre">config</span> : Object<div class="sub-desc"><p>A configuration object</p>
 118 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>The created template</p>
 119 </li></ul></div></div></div><div id="method-insertAfter" class="member ni"><a href="Ext.Template.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.Template.html#" rel="method-insertAfter" class="cls expand">insertAfter</a>(
 120 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 121  : 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>
 122 </div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) after el.</p>
 123 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 124 </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>
 125 </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>
 126 </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>
 127 </li></ul></div></div></div><div id="method-insertBefore" class="member ni"><a href="Ext.Template.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.Template.html#" rel="method-insertBefore" class="cls expand">insertBefore</a>(
 128 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 129  : 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>
 130 </div><div class="long"><p>Applies the supplied values to the template and inserts the new node(s) before el.</p>
 131 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 132 </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>
 133 </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>
 134 </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>
 135 </li></ul></div></div></div><div id="method-insertFirst" class="member ni"><a href="Ext.Template.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.Template.html#" rel="method-insertFirst" class="cls expand">insertFirst</a>(
 136 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 137  : 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>
 138 </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>
 139 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 140 </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>
 141 </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>
 142 </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>
 143 </li></ul></div></div></div><div id="method-overwrite" class="member ni"><a href="Ext.Template.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.Template.html#" rel="method-overwrite" class="cls expand">overwrite</a>(
 144 <span class="pre">Mixed el, Object/Array values, [Boolean returnElement]</span>)
 145  : 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>
 146 </div><div class="long"><p>Applies the supplied values to the template and overwrites the content of el with the new node(s).</p>
 147 <h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : Mixed<div class="sub-desc"><p>The context element</p>
 148 </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>
 149 </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>
 150 </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>
 151 </li></ul></div></div></div><div id="method-set" class="member ni"><a href="Ext.Template.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.Template.html#" rel="method-set" class="cls expand">set</a>(
 152 <span class="pre">String html, [Boolean compile]</span>)
 153  : Ext.Template</div><div class="description"><div class="short"><p>Sets the HTML used as the template and optionally compiles it.</p>
 154 </div><div class="long"><p>Sets the HTML used as the template and optionally compiles it.</p>
 155 <h3 class="pa">Parameters</h3><ul><li><span class="pre">html</span> : String<div class="sub-desc">
 156 </div></li><li><span class="pre">compile</span> : Boolean<div class="sub-desc"><p>(optional) True to compile the template (defaults to undefined)</p>
 157 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.Template</span>&nbsp; &nbsp;<p>this</p>
 158 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>