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);
}
相关文章推荐
- ExtJS4.2 TreeGrid 的用法
- 用js正则表达式检测内容中的空行
- JSP Learning
- 强大的JS数组
- JSON remember
- js对联广告效果全面兼容所有浏览器
- JS清理Word格式
- javascript性能提升——脚本位置
- JS全角转半角
- JS半角转全角
- ExtJs xtype一览
- javascript显示和隐藏一个表格
- Ext学--引用的ExtJs路径
- 如何在网页中插入Skype链接标签,如www.haoyunlifu.com中Skype链接
- extjs 2.0获取选中的radio的值
- Javascript 深入理解 闭包
- javascript不同类型数据之间的运算是如何转换的
- 在Eclipse里使用JSHint 检查 js代码
- VC/MFC中通过CWebPage类调用javascript函数(给js函数传参,并取得返回值)
- 扩展Bundle支持动态Bundle和javascript混淆