docs/source/Template.html

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