/**
- * @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:
-
- * @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 || '');
-};