转自：http://joyliu.org/blog/archives/167

在Extjs4的Grid中改变单元格背景颜色，最近项目中也有用到，所以还是做好实例，还是用之前的例子《》,变化的百分比如果是正数用绿色背景色，如果是负数用橙色背景色，先看下效果:

cell改变背景色

　　查询api,在grid中需要改变列，单元格属性用的比较多的还是renderer

renderer : FunctionA renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered. …… Parameters value : Object The data value for the current cell metaData : Object A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style. ……

看能用上的这个参数metaData，这里可以通过tdCls,tdAttr, 和style去修改单元格的样式和相关的属性

这里我用tdCls和style

①设置style

{
                       xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { /* if (value > 0) { return '' + value + '%'; } else if (value < 0) { return '' + value + '%'; }*/ if(value>0){ metaData.tdCls="changeplus"; }else{ metaData.tdCls="changediv"; } return value+'%'; }

②如果是用tdCls，

app.css

.x-grid-cell.changeplus { background-color: #42E61A; } .x-grid-cell.changediv { background-color: #F79709; }

CompanyGrid.js

{
                       xtype: 'gridcolumn', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { /* if (value > 0) { return '' + value + '%'; } else if (value < 0) { return '' + value + '%'; }*/ if (value > 0) { metaData.style=' margin: 0px; padding: 0px; color: rgb(102, 102, 0);">; }else{ metaData.style=' margin: 0px; padding: 0px; color: rgb(102, 102, 0);">; } return value+'%'; }, width: 75, dataIndex: 'pctChange', text: '变化百分比' },

两种方式都可以达到相同的效果，可以通过tdAttr来设置单元格的提示，在grid的列中显示的内容比较长是可以用到，还是挺使用的。