ExtJS Ext rownumberer列无法触发鼠标悬停问题求助

方法一：通过CSS强制添加悬停样式 #

RowNumberer列的单元格默认带有x-grid-cell-row-numberer类，直接给这个类添加hover样式即可：

.x-grid-cell-row-numberer:hover {
    background-color: #e6f2ff; /* 替换为你需要的悬停背景色 */
    cursor: default; /* 可选，调整鼠标指针样式 */
}

方法二：自定义RowNumberer组件补充悬停类 #

如果你的悬停效果依赖其他列使用的特定CSS类（比如x-grid-cell-hover），可以自定义RowNumberer并重写renderer来添加该类：

Ext.define('CustomRowNumberer', {
    extend: 'Ext.grid.column.RowNumberer',
    alias: 'widget.customrownumberer',

    renderer: function(value, metaData) {
        // 保留原有行号渲染逻辑
        var rowHtml = this.callParent(arguments);
        // 给单元格添加悬停类
        metaData.tdCls += ' x-grid-cell-hover';
        return rowHtml;
    }
});

在Grid的列配置中使用自定义组件：

columns: [
    {
        xtype: 'customrownumberer',
        text: '行号'
    },
    // 其他列配置...
]

问题原因 #

默认RowNumberer列的单元格未包含其他列用于触发悬停效果的CSS类，且默认样式中没有针对它的hover规则，导致悬停效果不生效。

内容的提问来源于stack exchange，提问作者Ganesh R