Extjs4:改变Grid单元格背景色（转载）

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

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

cell改变背景色

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

renderer : Function
A 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 '<span style="color:green;">' + value + '%</span>';
                        } else if (value < 0) {
                            return '<span style="color:red;">' + value + '%</span>';
                        }*/
                    	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 '<span style="color:green;">' + value + '%</span>';
                        } else if (value < 0) {
                            return '<span style="color:red;">' + value + '%</span>';
                        }*/
                    	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的列中显示的内容比较长是可以用到，还是挺使用的。