EXTJS根据值Value改变gridpanel单元格背景颜色或者设置整行字体颜色

 

第一步. 设置样式

.reportColor4{
background: #93A9C1;
}
.reportColor5{
background: #EEEEEE;
}

第二步.修改单元格样式

header : '流通类型',
width : 80,
sortable : true,
align : 'center',
dataIndex: 'BR_TYPE',
// css : 'background: #acdaf4;', // ----- 设置整个单元格的样式，但是不能根据条件变化
renderer:function(v,cellmeta){
if(v==1){ // 判断值类型
cellmeta.css="reportColor4"; // 设置样式
return "<span style='color:white'>借出</span>"; // 改变输出字体颜色
}else if(v==2){
cellmeta.css="reportColor5";
return "<span style='color:green'>归还</span>";
}else{
return "<span style='color:blue'>未知</span>";
}
}

第二步.修改整行颜色

根绝value值修改整行的颜色，需要配置在grid的viewConfig中

viewConfig : {forceFit : true,
getRowClass:function(record,index,p,ds) {
var cls = 'white-row';
switch (record.data.STATUS) {
case '0' : cls = 'x-grid-record-green'; break;
case '1' : cls = 'x-grid-record-yellow'; break;
case '2' : cls = 'x-grid-record-orange'; break;
case '3' : cls = 'x-grid-record-red'; break;
case '4' : cls = 'x-grid-record-gray'; break;
}
return cls;
}
}

当然，字体样式也是需要定义的

.x-grid-record-gray table{ color: #948d8e; }
.x-grid-record-red table{ color: red; }
.x-grid-record-yellow table{ color: blue; }
.x-grid-record-green table{ color: green; }
.x-grid-record-orange table{ color: orange; }

========= 备注=================

renderer方法很常用，先看下renderer: function()里的参数

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){

}
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。
3.record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。
4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。