如何实现ExtJS经典版可配置透视网格的行号显示？

嘿，我之前也遇到过这个问题！ExtJS的透视网格（PivotGrid）因为内部渲染逻辑和普通网格不一样，直接设置rowNumbers: true确实不会生效。别着急，给你两种靠谱的实现方式：

透视网格的列定义是通过matrix.columns配置的，你需要手动在这个数组最前面加一个行号列，用renderer来生成行号：

Ext.create('Ext.pivot.Grid', {
    // 其他原有配置...
    matrix: {
        columns: [
            // 先插入自定义行号列
            {
                text: '行号',
                width: 60,
                sortable: false,
                renderer: function(value, meta, record, rowIndex) {
                    // rowIndex是当前行在视图里的索引，加1就是直观的行号
                    return rowIndex + 1;
                },
                // 关键配置：让这个列不被透视配置面板修改/隐藏
                ignore: true,
                hidden: false
            },
            // 原来的透视列配置保留不动
            {
                dataIndex: 'year',
                header: 'Year'
            },
            // 其他透视列...
        ],
        // 其他matrix配置...
    }
});

这里的ignore: true一定要加上，它能避免这个行号列被用户在透视配置面板里误操作（比如隐藏、拖拽排序）。

如果你的透视网格需要支持分页，或者想要行号跨分页累加（比如第二页第一行行号是21而不是1），可以写个简单的插件来实现：

首先定义插件：

Ext.define('App.plugin.PivotRowNumberer', {
    extend: 'Ext.plugin.Abstract',
    alias: 'plugin.pivotrownumberer',

    init: function(grid) {
        var view = grid.getView();
        
        // 监听视图渲染前事件，添加行号表头
        view.on('beforerender', this.addHeaderCell, this);
        // 监听视图刷新事件，更新所有行号
        view.on('refresh', this.updateRowNumbers, this);
    },

    addHeaderCell: function(view) {
        var headerCt = view.headerCt;
        headerCt.insert(0, {
            text: '行号',
            width: 60,
            sortable: false,
            ignore: true
        });
    },

    updateRowNumbers: function(view) {
        var rows = view.getNodes(),
            // 计算分页后的起始行号
            startNum = view.store.currentPage > 1 ? (view.store.currentPage - 1) * view.store.pageSize : 0;
        
        Ext.Array.each(rows, function(row, index) {
            var cell = Ext.fly(row).down('.x-grid-cell-first');
            if (cell) {
                cell.setHtml(startNum + index + 1);
            }
        });
    }
});

然后在你的透视网格里引入这个插件：

Ext.create('Ext.pivot.Grid', {
    // 其他原有配置...
    plugins: ['pivotrownumberer'],
    matrix: {
        // 原来的透视配置不变
    }
});

这个方法的优势是行号会跟着分页自动调整，不需要修改原有的列配置结构。

• 透视网格的行是动态分组渲染的，上面两种方法生成的行号都是基于当前视图可见行的索引。如果需要对应原始数据的行号，你得先在每条record里存储原始数据的索引，然后在renderer里取这个值来显示。
• 如果你是在Kitchen Sink的示例上修改，记得找到示例里的matrix.columns配置段，把自定义行号列加进去，或者添加上面的插件就行。

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