ExtJS Grid 改变单元格背景颜色的方法

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

首先定义一个样式如下（这里以红色背景为例）：

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

 

 

评论

1 楼 shaohan126448 2011-01-17  

不让它全部填充所有单元格，那你怎样设置颜色的高和宽呢？