docs/source/Template2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-Template'>/**
   2 </span> * @class Ext.Template
   3  * &lt;p&gt;Represents an HTML fragment template. Templates may be {@link #compile precompiled}
   4  * for greater performance.&lt;/p&gt;
   5  * An instance of this class may be created by passing to the constructor either
   6  * a single argument, or multiple arguments:
   7  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
   8  * &lt;li&gt;&lt;b&gt;single argument&lt;/b&gt; : String/Array
   9  * &lt;div class=&quot;sub-desc&quot;&gt;
  10  * The single argument may be either a String or an Array:&lt;ul&gt;
  11  * &lt;li&gt;&lt;tt&gt;String&lt;/tt&gt; : &lt;/li&gt;&lt;pre&gt;&lt;code&gt;
  12 var t = new Ext.Template(&quot;&amp;lt;div&gt;Hello {0}.&amp;lt;/div&gt;&quot;);
  13 t.{@link #append}('some-element', ['foo']);
  14    &lt;/code&gt;&lt;/pre&gt;
  15  * &lt;li&gt;&lt;tt&gt;Array&lt;/tt&gt; : &lt;/li&gt;
  16  * An Array will be combined with &lt;code&gt;join('')&lt;/code&gt;.
  17 &lt;pre&gt;&lt;code&gt;
  18 var t = new Ext.Template([
  19     '&amp;lt;div name=&quot;{id}&quot;&amp;gt;',
  20         '&amp;lt;span class=&quot;{cls}&quot;&amp;gt;{name:trim} {value:ellipsis(10)}&amp;lt;/span&amp;gt;',
  21     '&amp;lt;/div&amp;gt;',
  22 ]);
  23 t.{@link #compile}();
  24 t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
  25    &lt;/code&gt;&lt;/pre&gt;
  26  * &lt;/ul&gt;&lt;/div&gt;&lt;/li&gt;
  27  * &lt;li&gt;&lt;b&gt;multiple arguments&lt;/b&gt; : String, Object, Array, ...
  28  * &lt;div class=&quot;sub-desc&quot;&gt;
  29  * Multiple arguments will be combined with &lt;code&gt;join('')&lt;/code&gt;.
  30  * &lt;pre&gt;&lt;code&gt;
  31 var t = new Ext.Template(
  32     '&amp;lt;div name=&quot;{id}&quot;&amp;gt;',
  33         '&amp;lt;span class=&quot;{cls}&quot;&amp;gt;{name} {value}&amp;lt;/span&amp;gt;',
  34     '&amp;lt;/div&amp;gt;',
  35     // a configuration object:
  36     {
  37         compiled: true,      // {@link #compile} immediately
  38     }
  39 );
  40    &lt;/code&gt;&lt;/pre&gt;
  41  * &lt;p&gt;&lt;b&gt;Notes&lt;/b&gt;:&lt;/p&gt;
  42  * &lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  43  * &lt;li&gt;For a list of available format functions, see {@link Ext.util.Format}.&lt;/li&gt;
  44  * &lt;li&gt;&lt;code&gt;disableFormats&lt;/code&gt; reduces &lt;code&gt;{@link #apply}&lt;/code&gt; time
  45  * when no formatting is required.&lt;/li&gt;
  46  * &lt;/ul&gt;&lt;/div&gt;
  47  * &lt;/div&gt;&lt;/li&gt;
  48  * &lt;/ul&gt;&lt;/div&gt;
  49  * @param {Mixed} config
  50  */
  51
  52 Ext.define('Ext.Template', {
  53
  54     /* Begin Definitions */
  55
  56     requires: ['Ext.core.DomHelper', 'Ext.util.Format'],
  57
  58     statics: {
  59 <span id='Ext-Template-method-from'>        /**
  60 </span>         * Creates a template from the passed element's value (&lt;i&gt;display:none&lt;/i&gt; textarea, preferred) or innerHTML.
  61          * @param {String/HTMLElement} el A DOM element or its id
  62          * @param {Object} config A configuration object
  63          * @return {Ext.Template} The created template
  64          * @static
  65          */
  66         from: function(el, config) {
  67             el = Ext.getDom(el);
  68             return new this(el.value || el.innerHTML, config || '');
  69         }
  70     },
  71
  72     /* End Definitions */
  73
  74     constructor: function(html) {
  75         var me = this,
  76             args = arguments,
  77             buffer = [],
  78             i = 0,
  79             length = args.length,
  80             value;
  81
  82         me.initialConfig = {};
  83
  84         if (length &gt; 1) {
  85             for (; i &lt; length; i++) {
  86                 value = args[i];
  87                 if (typeof value == 'object') {
  88                     Ext.apply(me.initialConfig, value);
  89                     Ext.apply(me, value);
  90                 } else {
  91                     buffer.push(value);
  92                 }
  93             }
  94             html = buffer.join('');
  95         } else {
  96             if (Ext.isArray(html)) {
  97                 buffer.push(html.join(''));
  98             } else {
  99                 buffer.push(html);
 100             }
 101         }
 102
 103         // @private
 104         me.html = buffer.join('');
 105
 106         if (me.compiled) {
 107             me.compile();
 108         }
 109     },
 110     isTemplate: true,
 111 <span id='Ext-Template-cfg-disableFormats'>    /**
 112 </span>     * @cfg {Boolean} disableFormats true to disable format functions in the template. If the template doesn't contain format functions, setting
 113      * disableFormats to true will reduce apply time (defaults to false)
 114      */
 115     disableFormats: false,
 116
 117     re: /\{([\w\-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
 118 <span id='Ext-Template-method-applyTemplate'>    /**
 119 </span>     * Returns an HTML fragment of this template with the specified values applied.
 120      * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 121      * @return {String} The HTML fragment
 122      * @hide repeat doc
 123      */
 124     applyTemplate: function(values) {
 125         var me = this,
 126             useFormat = me.disableFormats !== true,
 127             fm = Ext.util.Format,
 128             tpl = me;
 129
 130         if (me.compiled) {
 131             return me.compiled(values);
 132         }
 133         function fn(m, name, format, args) {
 134             if (format &amp;&amp; useFormat) {
 135                 if (args) {
 136                     args = [values[name]].concat(Ext.functionFactory('return ['+ args +'];')());
 137                 } else {
 138                     args = [values[name]];
 139                 }
 140                 if (format.substr(0, 5) == &quot;this.&quot;) {
 141                     return tpl[format.substr(5)].apply(tpl, args);
 142                 }
 143                 else {
 144                     return fm[format].apply(fm, args);
 145                 }
 146             }
 147             else {
 148                 return values[name] !== undefined ? values[name] : &quot;&quot;;
 149             }
 150         }
 151         return me.html.replace(me.re, fn);
 152     },
 153
 154 <span id='Ext-Template-method-set'>    /**
 155 </span>     * Sets the HTML used as the template and optionally compiles it.
 156      * @param {String} html
 157      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
 158      * @return {Ext.Template} this
 159      */
 160     set: function(html, compile) {
 161         var me = this;
 162         me.html = html;
 163         me.compiled = null;
 164         return compile ? me.compile() : me;
 165     },
 166
 167     compileARe: /\\/g,
 168     compileBRe: /(\r\n|\n)/g,
 169     compileCRe: /'/g,
 170 <span id='Ext-Template-method-compile'>    /**
 171 </span>     * Compiles the template into an internal function, eliminating the RegEx overhead.
 172      * @return {Ext.Template} this
 173      * @hide repeat doc
 174      */
 175     compile: function() {
 176         var me = this,
 177             fm = Ext.util.Format,
 178             useFormat = me.disableFormats !== true,
 179             body, bodyReturn;
 180
 181         function fn(m, name, format, args) {
 182             if (format &amp;&amp; useFormat) {
 183                 args = args ? ',' + args: &quot;&quot;;
 184                 if (format.substr(0, 5) != &quot;this.&quot;) {
 185                     format = &quot;fm.&quot; + format + '(';
 186                 }
 187                 else {
 188                     format = 'this.' + format.substr(5) + '(';
 189                 }
 190             }
 191             else {
 192                 args = '';
 193                 format = &quot;(values['&quot; + name + &quot;'] == undefined ? '' : &quot;;
 194             }
 195             return &quot;',&quot; + format + &quot;values['&quot; + name + &quot;']&quot; + args + &quot;) ,'&quot;;
 196         }
 197
 198         bodyReturn = me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, &quot;\\'&quot;).replace(me.re, fn);
 199         body = &quot;this.compiled = function(values){ return ['&quot; + bodyReturn + &quot;'].join('');};&quot;;
 200         eval(body);
 201         return me;
 202     },
 203
 204 <span id='Ext-Template-method-insertFirst'>    /**
 205 </span>     * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
 206      * @param {Mixed} el The context element
 207      * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 208      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 209      * @return {HTMLElement/Ext.core.Element} The new node or Element
 210      */
 211     insertFirst: function(el, values, returnElement) {
 212         return this.doInsert('afterBegin', el, values, returnElement);
 213     },
 214
 215 <span id='Ext-Template-method-insertBefore'>    /**
 216 </span>     * Applies the supplied values to the template and inserts the new node(s) before el.
 217      * @param {Mixed} el The context element
 218      * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 219      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 220      * @return {HTMLElement/Ext.core.Element} The new node or Element
 221      */
 222     insertBefore: function(el, values, returnElement) {
 223         return this.doInsert('beforeBegin', el, values, returnElement);
 224     },
 225
 226 <span id='Ext-Template-method-insertAfter'>    /**
 227 </span>     * Applies the supplied values to the template and inserts the new node(s) after el.
 228      * @param {Mixed} el The context element
 229      * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 230      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 231      * @return {HTMLElement/Ext.core.Element} The new node or Element
 232      */
 233     insertAfter: function(el, values, returnElement) {
 234         return this.doInsert('afterEnd', el, values, returnElement);
 235     },
 236
 237 <span id='Ext-Template-method-append'>    /**
 238 </span>     * Applies the supplied &lt;code&gt;values&lt;/code&gt; to the template and appends
 239      * the new node(s) to the specified &lt;code&gt;el&lt;/code&gt;.
 240      * &lt;p&gt;For example usage {@link #Template see the constructor}.&lt;/p&gt;
 241      * @param {Mixed} el The context element
 242      * @param {Object/Array} values
 243      * The template values. Can be an array if the params are numeric (i.e. &lt;code&gt;{0}&lt;/code&gt;)
 244      * or an object (i.e. &lt;code&gt;{foo: 'bar'}&lt;/code&gt;).
 245      * @param {Boolean} returnElement (optional) true to return an Ext.core.Element (defaults to undefined)
 246      * @return {HTMLElement/Ext.core.Element} The new node or Element
 247      */
 248     append: function(el, values, returnElement) {
 249         return this.doInsert('beforeEnd', el, values, returnElement);
 250     },
 251
 252     doInsert: function(where, el, values, returnEl) {
 253         el = Ext.getDom(el);
 254         var newNode = Ext.core.DomHelper.insertHtml(where, el, this.applyTemplate(values));
 255         return returnEl ? Ext.get(newNode, true) : newNode;
 256     },
 257
 258 <span id='Ext-Template-method-overwrite'>    /**
 259 </span>     * Applies the supplied values to the template and overwrites the content of el with the new node(s).
 260      * @param {Mixed} el The context element
 261      * @param {Object/Array} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
 262      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 263      * @return {HTMLElement/Ext.core.Element} The new node or Element
 264      */
 265     overwrite: function(el, values, returnElement) {
 266         el = Ext.getDom(el);
 267         el.innerHTML = this.applyTemplate(values);
 268         return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
 269     }
 270 }, function() {
 271
 272 <span id='Ext-Template-method-apply'>    /**
 273 </span>     * Alias for {@link #applyTemplate}
 274      * Returns an HTML fragment of this template with the specified &lt;code&gt;values&lt;/code&gt; applied.
 275      * @param {Object/Array} values
 276      * The template values. Can be an array if the params are numeric (i.e. &lt;code&gt;{0}&lt;/code&gt;)
 277      * or an object (i.e. &lt;code&gt;{foo: 'bar'}&lt;/code&gt;).
 278      * @return {String} The HTML fragment
 279      * @member Ext.Template
 280      * @method apply
 281      */
 282     this.createAlias('apply', 'applyTemplate');
 283 });
 284 </pre></pre></body></html>