X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/docs/source/Template.html diff --git a/docs/source/Template.html b/docs/source/Template.html index 7385b3db..58271001 100644 --- a/docs/source/Template.html +++ b/docs/source/Template.html @@ -1,188 +1,82 @@ - - - The source code - - - - -
/** - * @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: -

-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'});
-
- * @constructor - * @param {String/Array} html The HTML fragment or an array of fragments to join("") or multiple arguments to join("") - */ -Ext.Template = function(html){ - var me = this, - a = arguments, - buf = []; - - if (Ext.isArray(html)) { - html = html.join(""); - } else if (a.length > 1) { - Ext.each(a, function(v) { - if (Ext.isObject(v)) { - Ext.apply(me, v); - } else { - buf.push(v); - } - }); - html = buf.join(''); - } - - /**@private*/ - me.html = html; - if (me.compiled) { - me.compile(); + + + + + The source code + + + + + + +
/**
+ * @class Ext.grid.column.Template
+ * @extends Ext.grid.column.Column
+ * 
+ * A Column definition class which renders a value by processing a {@link Ext.data.Model Model}'s
+ * {@link Ext.data.Model#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
+ * 
+ *  {@img Ext.grid.column.Template/Ext.grid.column.Template.png Ext.grid.column.Template grid column}
+ * 
+ * ## Code
+ *     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()
+ *     });
+ * 
+ * @markdown
+ * @xtype templatecolumn
+ */
+Ext.define('Ext.grid.column.Template', {
+    extend: 'Ext.grid.column.Column',
+    alias: ['widget.templatecolumn'],
+    requires: ['Ext.XTemplate'],
+    alternateClassName: 'Ext.grid.TemplateColumn',
 
-    
/** - * Compiles the template into an internal function, eliminating the RegEx overhead. - * @return {Ext.Template} this + /** + * @cfg {String/XTemplate} tpl + * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a + * {@link Ext.data.Model Model}'s {@link Ext.data.Model#data data} to produce a column's rendered value. */ - compile : function(){ + constructor: function(cfg){ var me = this, - sep = Ext.isGecko ? "+" : ","; - - 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('');};")); - 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 supplied values to the template and appends the new node(s) to 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 - */ - 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; - }, + tpl; + + me.callParent(arguments); + tpl = me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl); -
/** - * 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 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'}) - * @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 || ''); -};
- - \ No newline at end of file +}); +
+ +