extjs grid 整行变颜色_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 "

style='color:white'>借出

";

// 改变输出字体颜色

}else if(v==2){

cellmeta.css="reportColor5";

return "

style='color:green'>归还

";

}else{

return "

style='color:blue'>未知

";

}

}

第二步.修改整行颜色

根绝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，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。