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      * @hide repeat doc
 140      */
 141     applyTemplate: function(values) {
 142         var me = this,
 143             useFormat = me.disableFormats !== true,
 144             fm = Ext.util.Format,
 145             tpl = me;
 146
 147         if (me.compiled) {
 148             return me.compiled(values);
 149         }
 150         function fn(m, name, format, args) {
 151             if (format &amp;&amp; useFormat) {
 152                 if (args) {
 153                     args = [values[name]].concat(Ext.functionFactory('return ['+ args +'];')());
 154                 } else {
 155                     args = [values[name]];
 156                 }
 157                 if (format.substr(0, 5) == &quot;this.&quot;) {
 158                     return tpl[format.substr(5)].apply(tpl, args);
 159                 }
 160                 else {
 161                     return fm[format].apply(fm, args);
 162                 }
 163             }
 164             else {
 165                 return values[name] !== undefined ? values[name] : &quot;&quot;;
 166             }
 167         }
 168         return me.html.replace(me.re, fn);
 169     },
 170
 171 <span id='Ext-Template-method-set'>    /**
 172 </span>     * Sets the HTML used as the template and optionally compiles it.
 173      * @param {String} html
 174      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
 175      * @return {Ext.Template} this
 176      */
 177     set: function(html, compile) {
 178         var me = this;
 179         me.html = html;
 180         me.compiled = null;
 181         return compile ? me.compile() : me;
 182     },
 183
 184     compileARe: /\\/g,
 185     compileBRe: /(\r\n|\n)/g,
 186     compileCRe: /'/g,
 187 <span id='Ext-Template-method-compile'>    /**
 188 </span>     * Compiles the template into an internal function, eliminating the RegEx overhead.
 189      * @return {Ext.Template} this
 190      * @hide repeat doc
 191      */
 192     compile: function() {
 193         var me = this,
 194             fm = Ext.util.Format,
 195             useFormat = me.disableFormats !== true,
 196             body, bodyReturn;
 197
 198         function fn(m, name, format, args) {
 199             if (format &amp;&amp; useFormat) {
 200                 args = args ? ',' + args: &quot;&quot;;
 201                 if (format.substr(0, 5) != &quot;this.&quot;) {
 202                     format = &quot;fm.&quot; + format + '(';
 203                 }
 204                 else {
 205                     format = 'this.' + format.substr(5) + '(';
 206                 }
 207             }
 208             else {
 209                 args = '';
 210                 format = &quot;(values['&quot; + name + &quot;'] == undefined ? '' : &quot;;
 211             }
 212             return &quot;',&quot; + format + &quot;values['&quot; + name + &quot;']&quot; + args + &quot;) ,'&quot;;
 213         }
 214
 215         bodyReturn = me.html.replace(me.compileARe, '\\\\').replace(me.compileBRe, '\\n').replace(me.compileCRe, &quot;\\'&quot;).replace(me.re, fn);
 216         body = &quot;this.compiled = function(values){ return ['&quot; + bodyReturn + &quot;'].join('');};&quot;;
 217         eval(body);
 218         return me;
 219     },
 220
 221 <span id='Ext-Template-method-insertFirst'>    /**
 222 </span>     * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
 223      * @param {Mixed} el The context element
 224      * @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'})
 225      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 226      * @return {HTMLElement/Ext.core.Element} The new node or Element
 227      */
 228     insertFirst: function(el, values, returnElement) {
 229         return this.doInsert('afterBegin', el, values, returnElement);
 230     },
 231
 232 <span id='Ext-Template-method-insertBefore'>    /**
 233 </span>     * Applies the supplied values to the template and inserts the new node(s) before el.
 234      * @param {Mixed} el The context element
 235      * @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'})
 236      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 237      * @return {HTMLElement/Ext.core.Element} The new node or Element
 238      */
 239     insertBefore: function(el, values, returnElement) {
 240         return this.doInsert('beforeBegin', el, values, returnElement);
 241     },
 242
 243 <span id='Ext-Template-method-insertAfter'>    /**
 244 </span>     * Applies the supplied values to the template and inserts the new node(s) after el.
 245      * @param {Mixed} el The context element
 246      * @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'})
 247      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 248      * @return {HTMLElement/Ext.core.Element} The new node or Element
 249      */
 250     insertAfter: function(el, values, returnElement) {
 251         return this.doInsert('afterEnd', el, values, returnElement);
 252     },
 253
 254 <span id='Ext-Template-method-append'>    /**
 255 </span>     * Applies the supplied &lt;code&gt;values&lt;/code&gt; to the template and appends
 256      * the new node(s) to the specified &lt;code&gt;el&lt;/code&gt;.
 257      * &lt;p&gt;For example usage {@link #Template see the constructor}.&lt;/p&gt;
 258      * @param {Mixed} el The context element
 259      * @param {Object/Array} values
 260      * The template values. Can be an array if the params are numeric (i.e. &lt;code&gt;{0}&lt;/code&gt;)
 261      * or an object (i.e. &lt;code&gt;{foo: 'bar'}&lt;/code&gt;).
 262      * @param {Boolean} returnElement (optional) true to return an Ext.core.Element (defaults to undefined)
 263      * @return {HTMLElement/Ext.core.Element} The new node or Element
 264      */
 265     append: function(el, values, returnElement) {
 266         return this.doInsert('beforeEnd', el, values, returnElement);
 267     },
 268
 269     doInsert: function(where, el, values, returnEl) {
 270         el = Ext.getDom(el);
 271         var newNode = Ext.core.DomHelper.insertHtml(where, el, this.applyTemplate(values));
 272         return returnEl ? Ext.get(newNode, true) : newNode;
 273     },
 274
 275 <span id='Ext-Template-method-overwrite'>    /**
 276 </span>     * Applies the supplied values to the template and overwrites the content of el with the new node(s).
 277      * @param {Mixed} el The context element
 278      * @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'})
 279      * @param {Boolean} returnElement (optional) true to return a Ext.core.Element (defaults to undefined)
 280      * @return {HTMLElement/Ext.core.Element} The new node or Element
 281      */
 282     overwrite: function(el, values, returnElement) {
 283         el = Ext.getDom(el);
 284         el.innerHTML = this.applyTemplate(values);
 285         return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
 286     }
 287 }, function() {
 288
 289 <span id='Ext-Template-method-apply'>    /**
 290 </span>     * Alias for {@link #applyTemplate}
 291      * Returns an HTML fragment of this template with the specified &lt;code&gt;values&lt;/code&gt; applied.
 292      * @param {Object/Array} values
 293      * The template values. Can be an array if the params are numeric (i.e. &lt;code&gt;{0}&lt;/code&gt;)
 294      * or an object (i.e. &lt;code&gt;{foo: 'bar'}&lt;/code&gt;).
 295      * @return {String} The HTML fragment
 296      * @member Ext.Template
 297      * @method apply
 298      */
 299     this.createAlias('apply', 'applyTemplate');
 300 });
 301 </pre>
 302 </body>
 303 </html>