第一種情況：加載數據時改變列的顏色

首先定義一個樣式如下（這里以紅色背景為例）：

    .x-grid-back-red {  
        background: #FF0000;  
     }
定義改變顏色的列：
 {header:'摘要',dataIndex:'zhaoyao',align:'left',width:150,
            renderer : function(v,m){
                m.css='x-grid-back-red';  
                return v;  
            }
        }

效果圖如下：


第二種情況：加載數據完成后改變行的顏色

首先要解決的一個問題是如果判斷數據已經加載完畢，最簡單的方法是給grid的store添加onload事件。
如果你想有條件地改變某行的背景顏色，則還需要遍歷gird的store，這里有個簡單的方法即store的
each方法。看下面這個例子：

    grid.getStore().on('load',function(s,records){
        var girdcount=0;
        s.each(function(r){
            if(r.get('zy')=='本期合計'){
                grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';
            }else if(r.get('zy')=='本年累計'){
                grid.getView().getRow(girdcount).style.backgroundColor='#FF1493';
            }else if(r.get('zy')=='期初余額'){
                grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC';
            }
            girdcount=girdcount+1;
        });
    });

效果圖如下：


第三種情況：使用Ext本身的顏色渲染效果


暫時只發現Ext已經設計好的一種效果：單雙行背景顏色不同。
很簡單，在grid中配置stripeRows為true即可！

另外，如果想使用自己定義的行的背景顏色，那就去修改ext-all.css吧，提供幾個：
-----------在ext-all.css修改代碼如下---------

.x-grid3-row {

  border-color:#ffaaee;//改變grid邊框顏色

  border-top-color:#fff;

}

 

.x-grid3-row-alt{

       background-color:#ddeeaa;//改變 行的顏色

}

 

.x-grid3-row-over {

       border-color:#ddd;

  background-color:#ee1166;//鼠標移上去改變行的底色

  background-image:url(../images/default/grid/row-over.gif);

}