Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / src / grid / column / Template.js
diff --git a/src/grid/column/Template.js b/src/grid/column/Template.js
new file mode 100644 (file)
index 0000000..d8f1ec2
--- /dev/null
@@ -0,0 +1,62 @@
+/**
+ * @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',
+
+    /**
+     * @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.
+     */
+    constructor: function(cfg){
+        var me = this,
+            tpl;
+            
+        me.callParent(arguments);
+        tpl = me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl);
+
+        me.renderer = function(value, p, record) {
+            var data = Ext.apply({}, record.data, record.getAssociatedData());
+            return tpl.apply(data);
+        };
+    }
+});