Ext JS首列锁定时如何捕获Grid Panel的groupclick事件？

当Grid首列设置为锁定状态时，分组表头的groupclick事件无法触发，但groupexpand和groupcollapse事件可正常执行。原因是：带锁定列的Grid会生成两个独立视图——锁定视图（lockedView）和普通视图（normalView），分组表头实际渲染在锁定视图的头部区域，而默认的groupclick事件仅绑定在普通视图上，因此点击分组表头时无法触发该事件。

以下是两种可行的解决方案：

方案一：为锁定视图绑定groupclick事件 #

在Grid的afterrender事件中获取锁定视图，手动为其添加groupclick监听：

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    features: [{
        ftype: 'grouping'
    }],
    listeners: {
        groupexpand: function(view, node, group) {
            console.log('Group expanded');
        },
        groupcollapse: function(view, node, group) {
            console.log('Group collapsed');
        },
        afterrender: function(grid) {
            const lockedView = grid.getLockedView();
            if (lockedView) {
                lockedView.on('groupclick', function(view, node, group) {
                    console.log('Group click from locked view');
                    // 此处编写自定义逻辑
                });
            }
        }
    },
    columns: [{
        text: 'Task',
        flex: 1,
        tdCls: 'task',
        sortable: true,
        dataIndex: 'description',
        locked:true
    }]
});

方案二：通过DOM事件委托监听分组表头点击 #

直接在Grid的根元素上监听点击事件，通过选择器匹配分组表头元素：

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    features: [{
        ftype: 'grouping'
    }],
    listeners: {
        groupexpand: function(view, node, group) {
            console.log('Group expanded');
        },
        groupcollapse: function(view, node, group) {
            console.log('Group collapsed');
        },
        click: function(grid, e) {
            const groupHeader = e.getTarget('.x-grid-group-hd');
            if (groupHeader) {
                const view = grid.getView();
                const groupRecord = view.getGroupRecord(groupHeader);
                console.log('Group clicked:', groupRecord.get('description'));
                // 此处编写自定义逻辑
            }
        },
        element: 'el'
    },
    columns: [{
        text: 'Task',
        flex: 1,
        tdCls: 'task',
        sortable: true,
        dataIndex: 'description',
        locked:true
    }]
});

注意事项 #

• 方案一贴合Ext JS原生事件体系，可直接使用groupclick事件的原生参数（view、node、group）
• 方案二通过DOM事件委托实现，兼容性更强，无需依赖视图的事件绑定逻辑

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