ExtJS Grid 自定义行色时隔行变色失效的解决方案
在使用 ExtJS 开发 Grid 组件时,经常需要根据数据状态动态设置每一行的背景颜色。但在实际调试中,可能会遇到一个典型问题:奇数行能正常变色,偶数行(即默认隔行换色的行)却保持原样。
问题排查
查阅文档后发现,ExtJS 实现隔行换色是通过给 Grid 的行交替添加 x-grid-row-alt 样式类来实现的。默认的 CSS 规则会设置背景颜色,但如果我们自定义了特定类的样式,且没有提高优先级,默认样式就会覆盖掉我们的自定义颜色。
简单来说,就是 CSS 选择器的特异性不够。要解决这个问题,核心在于使用 !important 修饰符来强制提升自定义样式的优先级。
解决方案
在定义自定义行样式时,务必加上 !important。下面是一个完整的示例,展示了如何通过 CSS 和 ViewConfig 配合实现不同状态的行色区分。
CSS 部分
<style type="text/css">
.x-grid-record-yellow td {
background-color: rgb(255, 255, 118) !important;
}
.x-grid-record-purple td {
background-color: red !important;
}
.x-grid-record-orange td {
background-color: rgb(255, 187, 0) !important;
}
</style>
JavaScript 配置
在 Grid 的 viewConfig 中通过 getRowClass 函数返回对应的类名即可。注意检查参数拼写,确保逻辑准确。
Ext.define('bjgl.AlarmGrid', {
extend: 'Ext.grid.Panel',
requires: ['bjgl.AlarmModel'],
title: '信息列表',
// structId: 0,
contextPath: ,
: {},
: ,
: ,
: ,
: {
: () {
val = record.();
(val === ) {
;
} (val === ) {
;
} (val === ) {
;
}
;
}
}
});

