您的位置:首页 > Web前端 > JavaScript

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

2014-02-13 10:46 465 查看

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

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


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




}



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: