docs/output/Ext.Template.html

   1         <div class="body-wrap">
   2         <div class="top-tools">
   3             <a class="inner-link" href="#Ext.Template-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
   4             <a class="inner-link" href="#Ext.Template-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
   5             <a class="inner-link" href="#Ext.Template-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
   6                         <a class="bookmark" href="../docs/?class=Ext.Template"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
   7         </div>
   8                 <h1>Class Ext.Template</h1>
   9         <table cellspacing="0">
  10             <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
  11             <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../src/Template.js" target="_blank">Template.js</a></td></tr>
  12             <tr><td class="label">Class:</td><td class="hd-info">Template</td></tr>
  13                         <tr><td class="label">Subclasses:</td><td class="hd-info"><a ext:cls="Ext.XTemplate" href="output/Ext.XTemplate.html">XTemplate</a></td></tr>
  14                                     <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
  15                     </table>
  16         <div class="description">
  17             *
  18 Represents an HTML fragment template. Templates can be precompiled for greater performance.
  19 For a list of available format functions, see <a ext:cls="Ext.util.Format" href="output/Ext.util.Format.html">Ext.util.Format</a>.<br />
  20 Usage:\r
  21 <pre><code>var t = <b>new</b> Ext.Template(
  22     <em>'&lt;div name="{id}"&gt;'</em>,
  23         <em>'&lt;span class="{cls}"&gt;{name:trim} {value:ellipsis(10)}&lt;/span&gt;'</em>,
  24     <em>'&lt;/div&gt;'</em>
  25 );
  26 t.append(<em>'some-element'</em>, {id: <em>'myid'</em>, cls: <em>'myclass'</em>, name: <em>'foo'</em>, value: <em>'bar'</em>});</code></pre>        </div>
  27
  28         <div class="hr"></div>
  29                 <a id="Ext.Template-props"></a>
  30         <h2>Public Properties</h2>
  31                 <table cellspacing="0" class="member-table">
  32             <tr>
  33                 <th class="sig-header" colspan="2">Property</th>
  34                 <th class="msource-header">Defined By</th>
  35             </tr>
  36                 <tr class="property-row">\r
  37         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  38         <td class="sig">\r
  39         <a id="Ext.Template-disableFormats"></a>\r
  40             <b>disableFormats</b> : Boolean            <div class="mdesc">\r
  41                             True to disable format functions (defaults to false)                        </div>\r
  42         </td>\r
  43         <td class="msource">Template</td>\r
  44     </tr>\r
  45         <tr class="property-row alt">\r
  46         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  47         <td class="sig">\r
  48         <a id="Ext.Template-re"></a>\r
  49             <b>re</b> : RegExp            <div class="mdesc">\r
  50                             The regular expression used to match template variables                        </div>\r
  51         </td>\r
  52         <td class="msource">Template</td>\r
  53     </tr>\r
  54             </table>
  55                 <a id="Ext.Template-methods"></a>
  56         <h2>Public Methods</h2>
  57                 <table cellspacing="0" class="member-table">
  58             <tr>
  59                 <th class="sig-header" colspan="2">Method</th>
  60                 <th class="msource-header">Defined By</th>
  61             </tr>
  62                 <tr class="method-row expandable">\r
  63         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  64         <td class="sig">\r
  65         <a id="Ext.Template-Template"></a>\r
  66             <b>Template</b>(&nbsp;<code>String/Array html</code>&nbsp;)            <div class="mdesc">\r
  67                         <div class="short"></div>\r
  68             <div class="long">\r
  69                     <div class="mdetail-params">\r
  70         <strong>Parameters:</strong>\r
  71         <ul><li><code>html</code> : String/Array<div class="sub-desc">The HTML fragment or an array of fragments to join("") or multiple arguments to join("")</div></li>        </ul>\r
  72         <strong>Returns:</strong>\r
  73         <ul>\r
  74             <li><code></code></li>\r
  75         </ul>\r
  76     </div>\r
  77                 </div>\r
  78                         </div>\r
  79         </td>\r
  80         <td class="msource">Template</td>\r
  81     </tr>\r
  82         <tr class="method-row alt expandable">\r
  83         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  84         <td class="sig">\r
  85         <a id="Ext.Template-Template.from"></a>\r
  86             <b>Template.from</b>(&nbsp;<code>String/HTMLElement el</code>, <code>Object config</code>&nbsp;) : Ext.Template            <div class="mdesc">\r
  87                         <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
  88             <div class="long">\r
  89                 &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
  90         <strong>Parameters:</strong>\r
  91         <ul><li><code>el</code> : String/HTMLElement<div class="sub-desc">A DOM element or its id</div></li><li><code>config</code> : Object<div class="sub-desc">A configuration object</div></li>        </ul>\r
  92         <strong>Returns:</strong>\r
  93         <ul>\r
  94             <li><code>Ext.Template</code><div class="sub-desc">The created template</div></li>\r
  95         </ul>\r
  96     </div>\r
  97                 </div>\r
  98                         </div>\r
  99         </td>\r
 100         <td class="msource">Template</td>\r
 101     </tr>\r
 102         <tr class="method-row expandable">\r
 103         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 104         <td class="sig">\r
 105         <a id="Ext.Template-append"></a>\r
 106             <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
 107                         <div class="short">Applies the supplied values to the template and appends the new node(s) to el.</div>\r
 108             <div class="long">\r
 109                 Applies the supplied values to the template and appends the new node(s) to el.    <div class="mdetail-params">\r
 110         <strong>Parameters:</strong>\r
 111         <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
 112         <strong>Returns:</strong>\r
 113         <ul>\r
 114             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>\r
 115         </ul>\r
 116     </div>\r
 117                 </div>\r
 118                         </div>\r
 119         </td>\r
 120         <td class="msource">Template</td>\r
 121     </tr>\r
 122         <tr class="method-row alt expandable">\r
 123         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 124         <td class="sig">\r
 125         <a id="Ext.Template-apply"></a>\r
 126             <b>apply</b>(&nbsp;<code>Object/Array values</code>&nbsp;) : String            <div class="mdesc">\r
 127                         <div class="short">Alias for <a ext:cls="Ext.Template" ext:member="applyTemplate" href="output/Ext.Template.html#applyTemplate">applyTemplate</a>
 128 Returns an HTML fragment of this template with the specified values applied.</div>\r
 129             <div class="long">\r
 130                 Alias for <a ext:cls="Ext.Template" ext:member="applyTemplate" href="output/Ext.Template.html#applyTemplate">applyTemplate</a>
 131 Returns an HTML fragment of this template with the specified values applied.    <div class="mdetail-params">\r
 132         <strong>Parameters:</strong>\r
 133         <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
 134         <strong>Returns:</strong>\r
 135         <ul>\r
 136             <li><code>String</code><div class="sub-desc">The HTML fragment</div></li>\r
 137         </ul>\r
 138     </div>\r
 139                 </div>\r
 140                         </div>\r
 141         </td>\r
 142         <td class="msource">Template</td>\r
 143     </tr>\r
 144         <tr class="method-row expandable">\r
 145         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 146         <td class="sig">\r
 147         <a id="Ext.Template-applyTemplate"></a>\r
 148             <b>applyTemplate</b>(&nbsp;<code>Object/Array values</code>&nbsp;) : String            <div class="mdesc">\r
 149                         <div class="short">Returns an HTML fragment of this template with the specified values applied.</div>\r
 150             <div class="long">\r
 151                 Returns an HTML fragment of this template with the specified values applied.    <div class="mdetail-params">\r
 152         <strong>Parameters:</strong>\r
 153         <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
 154         <strong>Returns:</strong>\r
 155         <ul>\r
 156             <li><code>String</code><div class="sub-desc">The HTML fragment</div></li>\r
 157         </ul>\r
 158     </div>\r
 159                 </div>\r
 160                         </div>\r
 161         </td>\r
 162         <td class="msource">Template</td>\r
 163     </tr>\r
 164         <tr class="method-row alt expandable">\r
 165         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 166         <td class="sig">\r
 167         <a id="Ext.Template-compile"></a>\r
 168             <b>compile</b>() : Ext.Template            <div class="mdesc">\r
 169                         <div class="short">Compiles the template into an internal function, eliminating the RegEx overhead.</div>\r
 170             <div class="long">\r
 171                 Compiles the template into an internal function, eliminating the RegEx overhead.    <div class="mdetail-params">\r
 172         <strong>Parameters:</strong>\r
 173         <ul><li>None.</li>        </ul>\r
 174         <strong>Returns:</strong>\r
 175         <ul>\r
 176             <li><code>Ext.Template</code><div class="sub-desc">this</div></li>\r
 177         </ul>\r
 178     </div>\r
 179                 </div>\r
 180                         </div>\r
 181         </td>\r
 182         <td class="msource">Template</td>\r
 183     </tr>\r
 184         <tr class="method-row expandable">\r
 185         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 186         <td class="sig">\r
 187         <a id="Ext.Template-insertAfter"></a>\r
 188             <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
 189                         <div class="short">Applies the supplied values to the template and inserts the new node(s) after el.</div>\r
 190             <div class="long">\r
 191                 Applies the supplied values to the template and inserts the new node(s) after el.    <div class="mdetail-params">\r
 192         <strong>Parameters:</strong>\r
 193         <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
 194         <strong>Returns:</strong>\r
 195         <ul>\r
 196             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>\r
 197         </ul>\r
 198     </div>\r
 199                 </div>\r
 200                         </div>\r
 201         </td>\r
 202         <td class="msource">Template</td>\r
 203     </tr>\r
 204         <tr class="method-row alt expandable">\r
 205         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 206         <td class="sig">\r
 207         <a id="Ext.Template-insertBefore"></a>\r
 208             <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
 209                         <div class="short">Applies the supplied values to the template and inserts the new node(s) before el.</div>\r
 210             <div class="long">\r
 211                 Applies the supplied values to the template and inserts the new node(s) before el.    <div class="mdetail-params">\r
 212         <strong>Parameters:</strong>\r
 213         <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
 214         <strong>Returns:</strong>\r
 215         <ul>\r
 216             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>\r
 217         </ul>\r
 218     </div>\r
 219                 </div>\r
 220                         </div>\r
 221         </td>\r
 222         <td class="msource">Template</td>\r
 223     </tr>\r
 224         <tr class="method-row expandable">\r
 225         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 226         <td class="sig">\r
 227         <a id="Ext.Template-insertFirst"></a>\r
 228             <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
 229                         <div class="short">Applies the supplied values to the template and inserts the new node(s) as the first child of el.</div>\r
 230             <div class="long">\r
 231                 Applies the supplied values to the template and inserts the new node(s) as the first child of el.    <div class="mdetail-params">\r
 232         <strong>Parameters:</strong>\r
 233         <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
 234         <strong>Returns:</strong>\r
 235         <ul>\r
 236             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>\r
 237         </ul>\r
 238     </div>\r
 239                 </div>\r
 240                         </div>\r
 241         </td>\r
 242         <td class="msource">Template</td>\r
 243     </tr>\r
 244         <tr class="method-row alt expandable">\r
 245         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 246         <td class="sig">\r
 247         <a id="Ext.Template-overwrite"></a>\r
 248             <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
 249                         <div class="short">Applies the supplied values to the template and overwrites the content of el with the new node(s).</div>\r
 250             <div class="long">\r
 251                 Applies the supplied values to the template and overwrites the content of el with the new node(s).    <div class="mdetail-params">\r
 252         <strong>Parameters:</strong>\r
 253         <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
 254         <strong>Returns:</strong>\r
 255         <ul>\r
 256             <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The new node or Element</div></li>\r
 257         </ul>\r
 258     </div>\r
 259                 </div>\r
 260                         </div>\r
 261         </td>\r
 262         <td class="msource">Template</td>\r
 263     </tr>\r
 264         <tr class="method-row expandable">\r
 265         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 266         <td class="sig">\r
 267         <a id="Ext.Template-set"></a>\r
 268             <b>set</b>(&nbsp;<code>String html</code>, <span class="optional" title="Optional">[<code>Boolean compile</code>]</span>&nbsp;) : Ext.Template            <div class="mdesc">\r
 269                         <div class="short">Sets the HTML used as the template and optionally compiles it.</div>\r
 270             <div class="long">\r
 271                 Sets the HTML used as the template and optionally compiles it.    <div class="mdetail-params">\r
 272         <strong>Parameters:</strong>\r
 273         <ul><li><code>html</code> : String<div class="sub-desc"></div></li><li><code>compile</code> : Boolean<div class="sub-desc">(optional) True to compile the template (defaults to undefined)</div></li>        </ul>\r
 274         <strong>Returns:</strong>\r
 275         <ul>\r
 276             <li><code>Ext.Template</code><div class="sub-desc">this</div></li>\r
 277         </ul>\r
 278     </div>\r
 279                 </div>\r
 280                         </div>\r
 281         </td>\r
 282         <td class="msource">Template</td>\r
 283     </tr>\r
 284             </table>
 285                 <a id="Ext.Template-events"></a>
 286         <h2>Public Events</h2>
 287         <div class="no-members">This class has no public events.</div>
 288         </div>