Extjs grid设置单元格字体颜色,单元格背景颜色,行背景颜色
一.在ColumnModel中用renderer渲染颜色:
1.不定义样式:
(1).字体颜色:
{ header:"审核状态", dataIndex:"status", width:100, renderer:function(v){ if(v==1){ return "<span style='color:green;'>审核成功</span>"; } else if(v==0){ return "<span style='color:red;'>等待审核</span>"; } } }
图解:
(2).背景颜色:
{ header:"审核状态", dataIndex:"status", width:100, renderer:function(v){ if(v==1){ return "<span style='background:green;'>审核成功</span>"; } else if(v==0){ return "<span style='background:red;'>等待审核</span>"; } } }
图解:
2.定义一个样式:
(1).字体颜色:
//样式 .fontColor{ color:#FF0000; } //Extjs { header:"审核状态", dataIndex:"status", width:100, renderer:function(v,m){ if(v==1){ return "审核成功"; } else if(v==0){ m.css='fontColor'; return "等待审核"; } } }
图解:
(2).背景颜色:
//css样式: .backColor{ background: #FF0000; } 或者 .backColor{ background-color:#FF0000 !important; } //Extjs: { header:"审核状态", dataIndex:"status", width:100, renderer:function(v,m){ if(v==1){ return "审核成功"; } else if(v==0){ m.css='backColor'; return "等待审核"; } } }
注:该方法需要在jsp文件中引入定义了该样式的样式文件
图解:
二.使用GridView改变颜色(需要定义样式):
1.字体颜色:
注:这种方式设置字体颜色有点问题,还未解决。
2.背景颜色:
//css样式: .backColor{ background: #C3FF8F; } 或者 .backColor{ background-color:#C3FF8F !important; } //Extjs: /*-----1.创建数据源-----*/ var epStore = new Ext.data.JsonStore({ autoLoad: true, url:"getEProject.eva?doType=getAuditProject", root:"data", fields: ["id","xmid","project","company","etype","emode","eagency","status"] }); /*-----2.创建GridView-----*/ var epView = new Ext.grid.GridView({ getRowClass : function(record, rowIndex){ if(record.get('status') == 1){ return "backColor"; } } }); /*-----3.创建ColumnModel----*/ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel({ columns:[ sm, { header:"编号", dataIndex:"id", hidden:true },{ header:"项目名称", dataIndex:"project", width:150, sortable:true }, ...... { header:"审核状态", dataIndex:"status", width:100, renderer:function(v){ if(v==1){ return "审核成功"; } else if(v==0){ return "等待审核"; } } } ] }); /*-----4.创建GridPanel----*/ var grid = new Ext.grid.GridPanel({ store:epStore, cm:cm, sm:sm, view: epView, loadMask:{msg:'正在加载数据,请稍侯……'}, height:80, tbar:[ ...... ], bbar: new Ext.PagingToolbar({ pageSize: pageSize, store: epStore, displayInfo: true, displayMsg: '当前显示 {0} - {1} ,共{2}条记录', emptyMsg: "没有数据", items: ['-'] }) });注:
1.用GridView中的getRowClass方法来实现颜色的渲染,status是在Store中定义的字段
2.要记得在GridPanel中加入view属性的定义!
图示:
相关推荐
ExtJs 4.0 Grid 单元格合并控件封装
Extjs4.2 Grid单元格编辑,包含日期控件,下拉框控件,同时可控制单元格是否有编辑权限。
100行代码解决ExtJs4.1合并单元格问题
extjs grid设置某列背景颜色和字体颜色的方法,需要的朋友可以参考下。
利用的是Column的render实现单元格背景颜色改变,本文给予了实现代码,感兴趣的朋友可以了解下,或许对你学习ExtJS4 Grid有所帮助
解决extjs中的GridPanel的单元格在IE无法选中复制的问题
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
修改grid行或列颜色修改grid行或列颜色修改grid行或列颜色修改grid行或列颜色修改grid行或列颜色
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
实现grid单元格重复数据的合并,完整的案例实现,包含合并方法和调用过程
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
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...
NULL 博文链接:https://dejazhan.iteye.com/blog/871259
extjs grid设置某列背景颜色和字体颜色的实现步骤,需要的朋友可以参考下。
NULL 博文链接:https://stanly-xia.iteye.com/blog/1534256
EXTJS实现单元格变色、行变色(文字、背景)