Ext Js grid 改变单元格背景色彩的方法

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

}
转自http://www.blogjava.net/liu0909/articles/287778.html

查看更多 下一篇