X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..b37ceabb82336ee82757cd32efe353cfab8ec267:/docs/source/Template.html diff --git a/docs/source/Template.html b/docs/source/Template.html index 7385b3db..e7460513 100644 --- a/docs/source/Template.html +++ b/docs/source/Template.html @@ -1,65 +1,134 @@ - -
-/** + + + ++ \ No newline at end of fileThe source code + + + + +/*! + * Ext JS Library 3.2.2 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.Template - * Represents an HTML fragment template. Templates can be precompiled for greater performance. - * For a list of available format functions, see {@link Ext.util.Format}.- +}; +
- * Usage: + *Represents an HTML fragment template. Templates may be {@link #compile precompiled} + * for greater performance.
+ *For example usage {@link #Template see the constructor}.
+ * + * @constructor + * An instance of this class may be created by passing to the constructor either + * a single argument, or multiple arguments: + *+ * @param {Mixed} config */ Ext.Template = function(html){ var me = this, - a = arguments, - buf = []; + a = arguments, + buf = [], + v; if (Ext.isArray(html)) { html = html.join(""); } else if (a.length > 1) { - Ext.each(a, function(v) { - if (Ext.isObject(v)) { + for(var i = 0, len = a.length; i < len; i++){ + v = a[i]; + if(typeof v == 'object'){ Ext.apply(me, v); } else { buf.push(v); } - }); + }; html = buf.join(''); } /**@private*/ me.html = html; + /** + * @cfg {Boolean} compiled Specify true to compile the template + * immediately (see+ *
- single argument : String/Array + *
+ *+ * The single argument may be either a String or an Array:+ *
- String :
+ *+var t = new Ext.Template("<div>Hello {0}.</div>"); +t.{@link #append}('some-element', ['foo']); + *
- Array :
+ * An Array will be combined withjoin('')
.- * @constructor - * @param {String/Array} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("") + *-var t = new Ext.Template( +var t = new Ext.Template([ '<div name="{id}">', '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>', - '</div>' -); -t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); + '</div>', +]); +t.{@link #compile}(); +t.{@link #append}('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
- multiple arguments : String, Object, Array, ... + *
+ *+ * Multiple arguments will be combined withjoin('')
. + *+ *+var t = new Ext.Template( + '<div name="{id}">', + '<span class="{cls}">{name} {value}</span>', + '</div>', + // a configuration object: + { + compiled: true, // {@link #compile} immediately + disableFormats: true // See Notes below. + } +); + *
Notes:
+ *+ *+ *
- Formatting and
+ *disableFormats
are not applicable for Ext Core.- For a list of available format functions, see {@link Ext.util.Format}.
+ *- + *
disableFormats
reduces{@link #apply}
time + * when no formatting is required.{@link #compile}
). + * Defaults to false. + */ if (me.compiled) { me.compile(); } }; Ext.Template.prototype = { + /** + * @cfg {RegExp} re The regular expression used to match template variables. + * Defaults to:+ */ + re : /\{([\w-]+)\}/g, + /** + * See+ * re : /\{([\w-]+)\}/g // for Ext Core + * re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g // for Ext JS + *
{@link #re}
. + * @type RegExp + * @property re + */ + /** - * Returns an HTML fragment of this template with the specified values applied. - * @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'}) + * Returns an HTML fragment of this template with the specifiedvalues
applied. + * @param {Object/Array} values + * The template values. Can be an array if the params are numeric (i.e.{0}
) + * or an object (i.e.{foo: 'bar'}
). * @return {String} The HTML fragment */ applyTemplate : function(values){ - var me = this; + var me = this; return me.compiled ? - me.compiled(values) : - me.html.replace(me.re, function(m, name){ - return values[name] !== undefined ? values[name] : ""; - }); - }, + me.compiled(values) : + me.html.replace(me.re, function(m, name){ + return values[name] !== undefined ? values[name] : ""; + }); + }, /** * Sets the HTML used as the template and optionally compiles it. @@ -68,32 +137,25 @@ Ext.Template.prototype = { * @return {Ext.Template} this */ set : function(html, compile){ - var me = this; + var me = this; me.html = html; me.compiled = null; return compile ? me.compile() : me; }, - /** - * The regular expression used to match template variables - * @type RegExp - * @property - */ - re : /\{([\w-]+)\}/g, - /** * Compiles the template into an internal function, eliminating the RegEx overhead. * @return {Ext.Template} this */ compile : function(){ var me = this, - sep = Ext.isGecko ? "+" : ","; + sep = Ext.isGecko ? "+" : ","; - function fn(m, name){ - name = "values['" + name + "']"; - return "'"+ sep + '(' + name + " == undefined ? '' : " + name + ')' + sep + "'"; + function fn(m, name){ + name = "values['" + name + "']"; + return "'"+ sep + '(' + name + " == undefined ? '' : " + name + ')' + sep + "'"; } - + eval("this.compiled = function(values){ return " + (Ext.isGecko ? "'" : "['") + me.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) + (Ext.isGecko ? "';};" : "'].join('');};")); @@ -134,10 +196,14 @@ Ext.Template.prototype = { }, /** - * Applies the supplied values to the template and appends the new node(s) to el. + * Applies the suppliedvalues
to the template and appends + * the new node(s) to the specifiedel
. + *For example usage {@link #Template see the constructor}.
* @param {Mixed} el The context element - * @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'}) - * @param {Boolean} returnElement (optional) true to return a Ext.Element (defaults to undefined) + * @param {Object/Array} values + * The template values. Can be an array if the params are numeric (i.e.{0}
) + * or an object (i.e.{foo: 'bar'}
). + * @param {Boolean} returnElement (optional) true to return an Ext.Element (defaults to undefined) * @return {HTMLElement/Ext.Element} The new node or Element */ append : function(el, values, returnElement){ @@ -165,8 +231,10 @@ Ext.Template.prototype = { }; /** * Alias for {@link #applyTemplate} - * Returns an HTML fragment of this template with the specified values applied. - * @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'}) + * Returns an HTML fragment of this template with the specifiedvalues
applied. + * @param {Object/Array} values + * The template values. Can be an array if the params are numeric (i.e.{0}
) + * or an object (i.e.{foo: 'bar'}
). * @return {String} The HTML fragment * @member Ext.Template * @method apply @@ -183,6 +251,7 @@ Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; Ext.Template.from = function(el, config){ el = Ext.getDom(el); return new Ext.Template(el.value || el.innerHTML, config || ''); -};