第一步. 設置樣式

.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，也就是說表格里所有的數據，你都可以隨便調用，唉，太厲害了。

總結

以上是生活随笔為你收集整理的extjs grid 整行变颜色_EXTJS根据值Value改变gridpanel单元格背景颜色或者设置整行字体颜色...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。