搭建直播平台，Ext Js grid 改变单元格背景颜色的方法

搭建直播平台，Ext Js grid 改变单元格背景颜色的方法

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

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

 

1	<br>     .x-grid-back-red  {  <br>        background: #FF0000;  <br>     }

​

定义改变颜色的列：

 

1	<br>   {header:'摘要',dataIndex:'zhaoyao',align:'left',width:150,<br>            renderer : function(v,m){<br>                m.css='x-grid-back-red';  <br>                return v;  <br>            }<br>        }

 

第二种情况：加载数据完成后改变行的颜色

首先要解决的一个问题是如果判断数据已经加载完毕，最简单的方法是给grid的store添加onload事件。

如果你想有条件地改变某行的背景颜色，则还需要遍历gird的store，这里有个简单的方法即store的

each方法。看下面这个例子：

 

1

<br>     grid.getStore().on('load', function (s,records) {<br>        var girdcount=0;<br>        s.each(function(r){<br>            if(r.get('zy')=='本期合计'){<br>                grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00';<br>            }else if(r.get('zy')=='本年累计'){<br>                grid.getView().getRow(girdcount).style.backgroundColor='#FF1493';<br>            }else if(r.get('zy')=='期初余额'){<br>                grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC';<br>            }<br>            girdcount=girdcount+1;<br>        });<br>    } );

 

第三种情况：使用Ext本身的颜色渲染效果

 

暂时只发现Ext已经设计好的一种效果：单双行背景颜色不同。

很简单，在grid中配置stripeRows为true即可！ 

 

另外，如果想使用自己定义的行的背景颜色，那就去修改ext-all.css吧，提供几个：

 

1

x-grid3-row  {<br>  border-color:#ffaaee;//改变grid边框颜色<br>  border-top-color:#fff;<br>}<br> <br>.x-grid3-row-alt {<br>       //改变 行的颜色<br>}<br> <br>.x-grid3-row-over  {<br>       border-color:#ddd;<br>  background-color:#ee1166;//鼠标移上去改变行的底色<br>  background-image:url(../images/default/grid/row-over.gif);<br>}

 

 以上就是 搭建直播平台，Ext Js grid 改变单元格背景颜色的方法，更多内容欢迎关注之后的文章