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