日期:2014-05-16  浏览次数:20395 次

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')=='本期合计'){