extjs grid 整行变颜色_EXTJS根据值Value改变gridpanel单元格背景颜色或者设置整行字体颜色...
第一步. 设置样式
.reportColor4{
background: #93A9C1;
}
.reportColor5{
background: #EEEEEE;
}
第二步.修改单元格样式
header : '流通类型',
width : 80,
sortable : true,
align : 'center',
dataIndex: 'BR_TYPE',
// css : 'background: #acdaf4;', // -----
设置整个单元格的样式,但是不能根据条件变化
renderer:function(v,cellmeta){
if(v==1){ // 判断值类型
cellmeta.css="reportColor4"; // 设置样式
return "
style='color:white'>借出
";
// 改变输出字体颜色
}else if(v==2){
cellmeta.css="reportColor5";
return "
style='color:green'>归还
";
}else{
return "
style='color:blue'>未知
";
}
}
第二步.修改整行颜色
根绝value值修改整行的颜色,需要配置在grid的viewConfig中
viewConfig : {forceFit : true,
getRowClass:function(record,index,p,ds) {
var cls = 'white-row';
switch (record.data.STATUS) {
case '0' : cls = 'x-grid-record-green'; break;
case '1' : cls = 'x-grid-record-yellow'; break;
case '2' : cls = 'x-grid-record-orange'; break;
case '3' : cls = 'x-grid-record-red'; break;
case '4' : cls = 'x-grid-record-gray'; break;
}
return cls;
}
}
当然,字体样式也是需要定义的
.x-grid-record-gray table{ color: #948d8e; }
.x-grid-record-red table{ color: red; }
.x-grid-record-yellow table{ color: blue; }
.x-grid-record-green table{ color: green; }
.x-grid-record-orange table{ color: orange; }
========= 备注=================
renderer方法很常用,先看下renderer:
function()里的参数
renderer:function(value, cellmeta, record, rowIndex, columnIndex,
store){
}
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。
3.record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。
4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。
extjs grid 整行变颜色_EXTJS根据值Value改变gridpanel单元格背景颜色或者设置整行字体颜色...相关推荐
- 使用NPOI设置Excel表的单元格背景颜色
使用NPOI设置Excel表的单元格背景颜色 2016年12月15日 15:25:01 起个名字真的好难啊 阅读数:15091更多 个人分类: 文件操作 版权声明:本文为博主原创文章,未经博主允许不得 ...
- 【c++】设置控制台窗口字体颜色和背景色(system和SetConsoleTextAttribute函数 )
编译后弹出的黑框框(exe 可执行文件)总是黑底白字,在做实践大作业时想到尝试改变字体的颜色与背景色,搜索发现有system和SetConsoleTextAttribute两个函数,各有长处,详细了解 ...
- java通过CellStyle设置单元格背景颜色
版权声明:本文为CSDN博主「想养一只!」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:java通过CellStyle设置单元格背景颜色 设置单元格背景 ...
- python3-xlwt-Excel设置表格基础(字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划线 斜体字 单元格对齐方式 自动换行 删除线 超链接 插入公式)
文章目录 引入xlwt和创建workboos对象 初始化样式和创建设置字体,赋值给style 保存文件 自定义样式 字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划 ...
- Uipath Excel 设置单元格背景颜色
学习目标: 熟悉Uipath Excel 设置单元格背景颜色 学习内容: Set Range Color 活动:设置Excel 单元格背景颜色 学习时间: 本章内容约学习时间10分钟 Demo 演示: ...
- notepad 怎么写python_notepad怎么设置python的字体颜色
notepad怎么设置python的字体颜色,记事本,文本,编辑器,文件,字体 notepad怎么设置python的字体颜色 易采站长站,站长之家为您整理了notepad怎么设置python的字体颜色 ...
- C#:GridControl之 bandedGridView中的单元格自动换行、动态设置单元格行高
C#:GridControl之 bandedGridView中的单元格自动换行.动态设置单元格行高 1.自动换行 //自动换行//RepositoryItemMemoEdit:一个编辑器,允许显示和编 ...
- pycharm如何设置注释的字体颜色
一.pycharm如何设置注释的字体颜色 1.打开pycharm编辑器,file > settings > Editor > Color Scheme > python > ...
- POI如何自定义单元格背景颜色
提出问题 POI如何自定义单元格背景颜色??? 解决问题 例一:具体的看注释 import org.apache.poi.hssf.usermodel.*; import org.apache.poi ...
最新文章
- android 多点触控缩放,Android多点触控(图片的缩放Demo)
- jmeter --- 基于InfluxDBGrafana的JMeter实时性能测试数据的监控和展示
- sysbench mysql 测试_sysbench MySQL测试例子
- python selenium实现百度搜索
- vue-lazyload的使用
- MediaInfo源代码分析 2:API函数
- Ubuntu 小白起步
- [论文评析] ArXiv,2021, Focal Self Attention技术分析
- 军用设备环境试验方法高温振动试验标准
- UE4 WebBrowser插件版本
- DIY-希捷硬盘固件问题的解决方法
- ‘Staff‘ object has no attribute ‘data‘
- CSS Sprite、CSS雪碧图应用实例
- 编程猫海龟编辑器(python)_编程猫海龟编辑器
- 台式计算机如何升级,老电脑如何升级 老电脑升级方法【详细介绍】
- html中text函数,Excel中text函数的使用方法
- android自定义美颜相机,效果最自然 美颜相机for Android版更新
- 有N个台阶,一步可以走一梯或者两梯,请问有多少种走法
- 2021春节过年送礼品送什么合适?
- 复杂网络;社交网络;社区检测;节点重要性(重要节点识别);舆论动力学模型; 传染病模型 ;蓄意攻击 、随机攻击;网络鲁棒性、脆弱性、稳定性
热门文章
- python调用matlab函数_从python调用MATLAB函数
- 让读博轻松、愉快的10种方法
- 【文末福利】元宇宙真的是人间天堂吗?元宇宙时代的5大风险
- 他将国际奥赛变成个人秀,哈佛为他打破校规,他的选择让国人骄傲
- 就业信息网进行服务器维护,服务器安全武汉大学黄石理工学院就业信息网.pptx...
- OpenCV-Python bindings是如何生成的(1)
- 做一个“多人在线编辑器”,你会怎么开始
- Raft成员变更的工程实践
- Iceberg 在基于 Flink 的流式数据入库场景中的应用
- flutter在2019年会有怎样的表现?