Ext.grid.CusTemplateColumn = Ext.extend(Ext.grid.TemplateColumn, { constructor: function(cfg){ Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg); var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl); this.renderer = function(value, p, r, rowIndex, colIndex){ //第一種方法 var newData=Ext.apply({rowIndex: rowIndex, colIndex: colIndex}, r.data); return tpl.apply(newData); //第二種方法 //r.data.rowIndex = rowIndex; //r.data.colIndex = colIndex; //return tpl.apply(r.data); //未修改前 //return tpl.apply(r.data); }; this.tpl = tpl; } }); Ext.onReady(function() { var store = new Ext.data.ArrayStore({ fields: ['title', 'rentals', 'trend'], data: [['ACADEMY DINOSAUR', 305, 'up'], ['DRAGONFLY STRANGERS', 240, 'neutral'], ['FAMILY SWEET', 188, 'down'], ['FREAKY POCUS', 205, 'up'], ['GABLES METROPOLIS', 265, 'up']] }); var template = new Ext.XTemplate( '<span >{rentals} {[this.getTrendClass(values.trend)]}' + '<input type="checkbox" name="check{rowIndex}" id="checkbox" value="{title}"/>' + '</span>', { getTrendClass : function(trend) { var retValue = ''; switch (trend) { case 'down': retValue = 'trend-down'; break; case 'neutral': retValue = 'trend-neutral'; break; case 'up': retValue = 'trend-up'; break; default: retValue = 'trend-neutral'; break; } return retValue; } } ); template.compile(); var myTemplateColumn=new Ext.grid.CusTemplateColumn({ header: "Rentals", width: 225, dataIndex: 'rentals', sortable: true, align: 'right', tpl:template }); var grid = new Ext.grid.GridPanel({ title: 'Movie rentals this month', store: store, columns: [ { id: 'title-col', header: "Title", width: 225, dataIndex: 'title', sortable: true }, myTemplateColumn ], autoExpandColumn: 'title-col', renderTo: Ext.getBody(), width: 450, height: 175, loadMask: true }); });
<!doctype html> <html> <head> <title>MessageBox</title> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script> <link href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> </head> <body> <body style="padding: 20px"> </body> </html>