X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..HEAD:/docs/source/Template.html?ds=sidebyside diff --git a/docs/source/Template.html b/docs/source/Template.html index 6eff6c90..a7046ea3 100644 --- a/docs/source/Template.html +++ b/docs/source/Template.html @@ -1,257 +1,77 @@ +
- +/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ -/** - * @class Ext.Template - *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: - *- *
- 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('')
. -- *-var t = new Ext.Template([ - '<div name="{id}">', - '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>', - '</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('')
. - *- \ No newline at end of file +-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. + + + + + + +
/** + * A Column definition class which renders a value by processing a {@link Ext.data.Model Model}'s + * {@link Ext.data.Model#persistenceProperty data} using a {@link #tpl configured} + * {@link Ext.XTemplate XTemplate}. + * + * @example + * Ext.create('Ext.data.Store', { + * storeId:'employeeStore', + * fields:['firstname', 'lastname', 'senority', 'department'], + * groupField: 'department', + * data:[ + * { firstname: "Michael", lastname: "Scott", senority: 7, department: "Manangement" }, + * { firstname: "Dwight", lastname: "Schrute", senority: 2, department: "Sales" }, + * { firstname: "Jim", lastname: "Halpert", senority: 3, department: "Sales" }, + * { firstname: "Kevin", lastname: "Malone", senority: 4, department: "Accounting" }, + * { firstname: "Angela", lastname: "Martin", senority: 5, department: "Accounting" } + * ] + * }); + * + * Ext.create('Ext.grid.Panel', { + * title: 'Column Template Demo', + * store: Ext.data.StoreManager.lookup('employeeStore'), + * columns: [ + * { text: 'Full Name', xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 }, + * { text: 'Deparment (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({senority})' } + * ], + * height: 200, + * width: 300, + * renderTo: Ext.getBody() + * }); */ -Ext.Template = function(html){ - var me = this, - a = arguments, - buf = [], - v; - - if (Ext.isArray(html)) { - html = html.join(""); - } else if (a.length > 1) { - 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+}); +{@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 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; - - return me.compiled ? - me.compiled(values) : - me.html.replace(me.re, function(m, name){ - return values[name] !== undefined ? values[name] : ""; - }); - }, +Ext.define('Ext.grid.column.Template', { + extend: 'Ext.grid.column.Column', + alias: ['widget.templatecolumn'], + requires: ['Ext.XTemplate'], + alternateClassName: 'Ext.grid.TemplateColumn', - /** - * Sets the HTML used as the template and optionally compiles it. - * @param {String} html - * @param {Boolean} compile (optional) True to compile the template (defaults to undefined) - * @return {Ext.Template} this + /** + * @cfg {String/Ext.XTemplate} tpl + * An {@link Ext.XTemplate XTemplate}, or an XTemplate *definition string* to use to process a + * {@link Ext.data.Model Model}'s {@link Ext.data.Model#persistenceProperty data} to produce a + * column's rendered value. */ - set : function(html, compile){ - var me = this; - me.html = html; - me.compiled = null; - return compile ? me.compile() : me; - }, - /** - * Compiles the template into an internal function, eliminating the RegEx overhead. - * @return {Ext.Template} this - */ - compile : function(){ + constructor: function(cfg){ var me = this, - sep = Ext.isGecko ? "+" : ","; - - function fn(m, name){ - name = "values['" + name + "']"; - return "'"+ sep + '(' + name + " == undefined ? '' : " + name + ')' + sep + "'"; - } + tpl; + + me.callParent(arguments); + tpl = me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl); - 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('');};")); - return me; - }, - - /** - * Applies the supplied values to the template and inserts the new node(s) as the first child of el. - * @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) - * @return {HTMLElement/Ext.Element} The new node or Element - */ - insertFirst: function(el, values, returnElement){ - return this.doInsert('afterBegin', el, values, returnElement); - }, - - /** - * Applies the supplied values to the template and inserts the new node(s) before el. - * @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) - * @return {HTMLElement/Ext.Element} The new node or Element - */ - insertBefore: function(el, values, returnElement){ - return this.doInsert('beforeBegin', el, values, returnElement); - }, - - /** - * Applies the supplied values to the template and inserts the new node(s) after el. - * @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) - * @return {HTMLElement/Ext.Element} The new node or Element - */ - insertAfter : function(el, values, returnElement){ - return this.doInsert('afterEnd', el, values, returnElement); - }, - - /** - * 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 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){ - return this.doInsert('beforeEnd', el, values, returnElement); - }, - - doInsert : function(where, el, values, returnEl){ - el = Ext.getDom(el); - var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values)); - return returnEl ? Ext.get(newNode, true) : newNode; - }, - - /** - * Applies the supplied values to the template and overwrites the content of el with the new node(s). - * @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) - * @return {HTMLElement/Ext.Element} The new node or Element - */ - overwrite : function(el, values, returnElement){ - el = Ext.getDom(el); - el.innerHTML = this.applyTemplate(values); - return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; + me.renderer = function(value, p, record) { + var data = Ext.apply({}, record.data, record.getAssociatedData()); + return tpl.apply(data); + }; } -}; -/** - * Alias for {@link #applyTemplate} - * 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 - */ -Ext.Template.prototype.apply = Ext.Template.prototype.applyTemplate; - -/** - * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. - * @param {String/HTMLElement} el A DOM element or its id - * @param {Object} config A configuration object - * @return {Ext.Template} The created template - * @static - */ -Ext.Template.from = function(el, config){ - el = Ext.getDom(el); - return new Ext.Template(el.value || el.innerHTML, config || ''); -}; -