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