读书人

EXTJS GRID 改变单元格背景色彩的方法

发布时间: 2012-10-27 10:42:26 作者: rapoo

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

}



//修改GRID某一行样式 grid.getView().addRowClass(r,css) //修改grid某一单元格样式 Ext.get(grid.getView().getCell(r,c)).addClass(css) 或 grid.getView().getRow(r).style.backgroundColor="red"; //css样式为自定义样式 

读书人网 >JavaScript

热点推荐