Ext grid改變行背景顏色 和改變行字體顏色
Ext grid顯示的行記錄背景顏色都是一樣的，這樣不容易區分不同行的顏色、方便用戶區分不同的記錄。
改變單元格背景顏色的方法有幾種，由簡單的說起吧！
第一種情況：加載數據時改變列的顏色。這種方式是通過Ext.grid.ColumnModel中某一列的renderer 函數來實現的。
首先定義一個樣式如下：
.x-grid-record-gray{
background: #c3daf9;
}
定義改變顏色的列，加上renderer 渲染函數：
{header:’摘要’,dataIndex:’zhaoyao’,align:’left’,width:150,
renderer : function(value, m){
m.css=’x-grid-record-gray’;
return value;
}
}
第二種情況：加載數據完成后改變行的顏色
首先要解決的一個問題是如果判斷數據已經加載完畢，最簡單的方法是給grid的store添加onload事件。
如果你想有條件地改變某行的背景顏色，則還需要遍歷gird的store，這里有個簡單的方法即store的
each方法。看下面這個例子：
grid.getStore().addListener(‘load’,handleGridLoadEvent);
function handleGridLoadEvent(store,records) {
var girdcount=0;
store.each(function(r){
if(r.get(‘STORESUSEDQTY’)==0){
grid.getView().getRow(girdcount).style.backgroundColor=’#c3daf9′;
}
girdcount=girdcount+1;
});
}
第三種情況：使用Ext本身的顏色渲染效果
在grid中配置stripeRows為true，可以實現隔行變色，但不能達到根據不同記錄集實現不同顏色的顯示效果.
說完上面常見的幾種方法之后，在來結合項目中的需求來實現背景顏色變色。現在項目中的Ext grid表格是三方公司用代碼更具配置文件動態生成的，其代碼都封裝了一個動態命名的命名空間里，JavaScript代碼寫在了頁面上。我只能在這個Ext grid代碼生成之后獲得一個grid引用。
下面是部分代碼：
Ext.namespace(‘BO_PC_REQUIRE_S’);
BO_PC_REQUIRE_S.Grid=function(){
currentRowInd=0;
currentColInd=0;
var AWS_GRID_CHECK;
var AWS_FORM;
var AWS_GRID_DS_PLANT;
var AWS_GRID_DS;
var AWS_GRID_CM;
var AWS_GRID_PANEL;
return {
perPage: 50,
currentRowInd:0,
currentColInd:0,
init : function(){
},
getDataSource: function() {
return AWS_GRID_DS;
},
getGridPanel: function() {
return AWS_GRID_PANEL;
},
getCurrentRowInd: function() {
return currentRowInd;
},
getCurrentColInd: function() {
return currentColInd;
},
getTitle: function(){
return ‘采購需求單子表（設計師）’;
},
saveData: function(){
if(typeof(outerDoSaveGrid)==’function’){return outerDoSaveGrid();}
},
setCellValue: function(f,v,r){
var rowInd=currentRowInd;
if(r!=undefined)rowInd=r;
AWS_GRID_DS.getAt(rowInd).set(f,v);
},
getCellValue: function(f,r){
var rowInd=currentRowInd;
if(r!=undefined)rowInd=r;
return AWS_GRID_DS.getAt(rowInd).get(f);
}
}//End return
});
參考上門說的三種方法，第一種不可實現，第二種可以實現，但存在一些問題：數據加載完之后，達到不同行顯示不同背景色的目的，但是當你單擊表頭進行排序的時候，表格內的所有行背景顏色又都回到了默認顏色，讓人煩惱！這時候想想，我可不可以重寫表頭的事件，使執行這些事件的時候，也是行背景變色呢？實現代碼如下：
BO_PC_REQUIRE_S.Grid.getGridPanel().getStore().addListener(‘load’,
handleGridLoadEvent);
function handleGridLoadEvent(store,records) {
var girdcount=0;
store.each(function(r){
if(r.get(‘STORESUSEDQTY’)==0){
BO_PC_REQUIRE_S.Grid.getGridPanel().getView().getRow(girdcount).style.backgroundColor=’#c3daf9′;
}
girdcount=girdcount+1;
});
}
BO_PC_REQUIRE_S.Grid.getGridPanel().addListener(‘headerclick’,
function(){
var girdcount=0;
BO_PC_REQUIRE_S.Grid.getDataSource().each(function(r){
if(r.get(‘STORESUSEDQTY’)==0){
BO_PC_REQUIRE_S.Grid.getGridPanel().getView().getRow(girdcount).style.backgroundColor=’#c3daf9′;
}
girdcount=girdcount+1;
});
});
BO_PC_REQUIRE_S.Grid.getGridPanel().addListener(‘headermousedown’, function(){});
這樣做又有了問題，表格排序事件不起作用了，有沒有更好的解決辦法呢？看看API，grid里有個視圖，通過改變視圖里的getRowClass方法，可以實現行跨多列顯示、單行內顯示多行內容等等效果。可不可以參照這個思路，通過改變css實現行背景換色呢？
代碼如下：
BO_PC_REQUIRE_S.Grid.getGridPanel().getView().getRowClass=function(record,rowIndex,rowParams,store){
if(record.data.STORESUSEDQTY==0){
return ‘x-grid-record-gray’;
}else{
return ”;
}};
第四種情況：首先在extjs 里的ext-all.css樣式里任意寫一個樣式，如：
.x-grid-record-blue table{color:blue;}
.x-grid-record-green table{color:green;}
.x-grid-record-red table{color:red;}
然后在js里面寫如下代碼：
