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: '',
    getApplySetInfoParams: {},
    storeAutoLoad: false,
    hideActionColumn: false,
    storeUrl: '/test.action',
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            var val = record.get('confAlarmFlag');
            if (val === '1') {
                return 'x-grid-record-yellow';
            } else if (val === '2') {
                return 'x-grid-record-orange';
            } else if (val === '3') {
                return 'x-grid-record-purple';
            }
            return '';
        }
    }
});

总结

只要记住一点：当自定义样式需要覆盖 ExtJS 框架默认样式（如隔行变色）时，CSS 中必须使用 !important。这样既能保证业务逻辑的颜色需求，又能维持 Grid 组件的基础交互体验。