docs/source/Template2.html

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