第一种情况:加载数据时改变列的颜色

首先定义一个样式如下(这里以红色背景为例):

    .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);

}