Grid单元格换色

{
				text:'类别',
				dataIndex:'type',
				align:'center',
				renderer:function(value,metaData){
					console.log(metaData);
					if(value=http://www.mamicode.com/=0){>
css样式
.x-grid-record-gray{
	background-color:gray !important;
}
.x-grid-record-green{
	background-color:green !important;
}

这里说明下，我在网上看到很多案例大体上这么做，但我没有成功，最后发现，原来是我写的样式最终被extjs的覆盖了，不起作用，如果想提高自己写的样式优先级，得加上！important
效果：

行换色
viewConfig:{
				stripeRows: false,//是否隔行换色
				getRowClass : function(record,rowIndex,rowParams,store){
					var type = record.get('type');
					switch (type){
					case '0':
						return 'x-grid-record-gray';
					case '1':
						return 'x-grid-record-green';
					}
				}
			}

getRowClass( Ext.data.Model record, Number index, Object rowParams, Ext.data.Store store ) : String
重写这个函数在渲染时应用自定义的CSS样式。函数将返回被添加到该行div的CSS样式名称（或空字符串‘‘）。 要应用多个样式名称，只需在返回字符串内使用空格分隔开 (例如 ‘my-class another-class‘).
示例用法：
viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store){
        return record.get("valid") ? "row-valid" : "row-error";
    }
}
Parameters
record : Ext.data.Model
该记录对应的当前行。
index : Number
行索引
rowParams : Object
DEPRECATED.（不推荐使用） 用于行body使用 方法 getAdditionalData 的rowbody功能。
store : Ext.data.Store
绑定到grid的store。
Returns
String
添加到该行的CSS样式名称。

ExtJs4学习（十）Grid单元格换色和行换色的方法