ExtJS Grid 自定义行色时隔行变色失效的解决方案

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 === ) {
                 ;
            }
             ;
        }
    }
});