第一种情况:加载数据时改变列的颜色
首先定义一个样式如下(这里以红色背景为例):
.x-grid-back-red {
background: #FF0000;
}
background: #FF0000;
}
定义改变颜色的列:
{header:'摘要',dataIndex:'zhaoyao',align:'left',width:150,
renderer : function(v,m){
m.css='x-grid-back-red';
return v;
}
}
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;
});
});
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);
}
.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);
}
相关推荐
MyGridView=Ext.extend(Ext.grid.GridView,{ renderHeaders : function(){ var cm = this.cm, ts = this.templates; var ct = ts.hcell,ct2=ts.mhcell; var cb = [], sb = [], p = {},mcb=[]; for(var i = 0...
利用的是Column的render实现单元格背景颜色改变,本文给予了实现代码,感兴趣的朋友可以了解下,或许对你学习ExtJS4 Grid有所帮助
EXT GridPanel获取某一单元格的值
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
ext表格合并单元格的方法,合并表头的方法extjs的官网上有,这里提供的是合并数据单元格的方法
Ext自定义Grid Cell插件,使用此插件可以在Grid空间的Cell单元格中插入指定的控件
EXT中根据返回的grid中的状态列的内容来改变这一行显示的背景颜色
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
本人成功实现的一个合并列的例子,希望对大家有帮助
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
EXT-JS Grid 用法 用EXT Designer 工具设计,步骤清晰详尽。
http: www extgrid com extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过...extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列 [更多]
Ext 合并列表数据单元格 源代码以及效果图都在
我的资源不需要积分 EXT2.0 GRID 示例 很实用
Ext4 grid打印,打印预览,复杂表头打印,等等都实现了!
ext grid 根据条件指定行颜色,比如总分大于90分行显示为红色
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
EXT支持GRID中文排序 主要是重写排序的方法
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用