ExtJS 6 Grid复选框选择模型：如何全局抑制选择事件？

我完全懂你遇到的麻烦——几千条记录的Grid里，代码调用selectionModel.selectAll(true)一点不卡，可点表头复选框全选就直接冻结，核心就是后者默认没抑制选择事件，触发了几千次单条选择的事件，把浏览器线程堵死了。下面给你两个实用的解决方案：

方法一：自定义复选框选择模型（全局复用） #

如果你的项目里多个Grid都有这个问题，推荐重写CheckboxSelectionModel的表头点击逻辑，让它默认用带suppressEvent参数的全选/取消全选方法：

Ext.define('MyApp.selection.CustomCheckboxModel', {
    extend: 'Ext.selection.CheckboxModel',
    alias: 'selection.customcheckbox',

    onHeaderClick: function(headerCt, header, e) {
        // 只处理表头的复选框列
        if (header.isCheckerHd) {
            e.stopEvent(); // 阻止默认的全选逻辑
            var isChecked = header.el.hasCls('x-grid-hd-checker-on');
            
            if (isChecked) {
                this.deselectAll(true); // 取消全选时也抑制事件
            } else {
                this.selectAll(true); // 关键：传入true跳过选择事件触发
            }
        } else {
            // 其他表头点击行为保持默认
            this.callParent(arguments);
        }
    }
});

之后在Grid的配置里用这个自定义模型就行：

Ext.create('Ext.grid.Panel', {
    // ...其他Grid配置
    selModel: {
        type: 'customcheckbox'
    }
});

方法二：单个Grid的表头点击监听（灵活适配） #

如果只是某个特定Grid有问题，直接给这个Grid加个渲染监听，手动替换表头复选框的点击逻辑：

Ext.create('Ext.grid.Panel', {
    // ...其他Grid配置
    selModel: 'checkboxmodel',
    listeners: {
        render: function(grid) {
            // 找到表头的复选框列
            var checkerHeader = grid.headerCt.down('gridcolumn[isCheckerHd]');
            
            checkerHeader.on('click', function(e) {
                e.stopEvent(); // 阻止默认行为
                var selModel = grid.getSelectionModel();
                var isChecked = checkerHeader.el.hasCls('x-grid-hd-checker-on');
                
                if (isChecked) {
                    selModel.deselectAll(true);
                } else {
                    selModel.selectAll(true);
                }
            });
        }
    }
});

为什么这两种方法有效？ #

默认的表头全选逻辑会逐条触发单条记录的选择事件，几千条记录就会产生几千次同步事件，直接把浏览器主线程占满导致冻结。而带true参数的selectAll/deselectAll会跳过事件触发，直接批量更新选择状态，性能提升非常明显。

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