ExtJS中使用memory代理的checkboxmodel如何实现全选所有分页数据

核心问题原因 #

默认ExtJS的checkboxmodel选择模型的全选逻辑仅针对当前store已加载的页面数据生效，本地分页场景下全量数据存储在memory代理中，不会一次性加载到当前store的活跃数据集合中，因此默认全选只能选中当前页。

具体修改方案 #

你只需要修改grid的selModel配置，重写全选、取消全选以及选中状态同步的相关逻辑即可，修改后的完整代码如下：

Ext.create('Ext.data.Store', {
    id: 'simpsonsStore',
    fields: ['dummyOne', 'dummyTwo'],
    pageSize: 50,
    proxy: {
        type: 'memory',
        enablePaging: true
    },
     data: (function () {
            var i,
                data = [];
            for (i = 0; i < 200; i++) {
                var obj = {};
                obj.dummyOne = Math.random() * 1000;
                obj.dummyTwo = Math.random() * 1000;
                data.push(obj);
            }
            return data;
        })()
});
var grid = {
    xtype: 'grid',
    height: '100%',
    title: "Grid Panel",
    selModel: {
        type: 'checkboxmodel',
        // 重写全选逻辑，选中所有分页的全量数据
        selectAll: function(suppressEvent) {
            var me = this,
                store = me.store,
                allRecords = store.getProxy().getData();
            if (me.selectionMode !== 'SINGLE') {
                me.select(allRecords, false, suppressEvent);
            }
        },
        // 重写取消全选逻辑，清空所有分页的选中状态
        deselectAll: function(suppressEvent) {
            var me = this,
                store = me.store,
                allRecords = store.getProxy().getData();
            me.deselect(allRecords, suppressEvent);
        },
        // 重写表头全选框状态同步逻辑，匹配全局选中情况
        updateHeaderState: function() {
            var me = this,
                store = me.store,
                allCount = store.getTotalCount(),
                selectedCount = me.getCount();
            if (!me.headerCt) {
                return;
            }
            var checkHd = me.headerCt.child('gridcolumn[isCheckerHd]');
            if (checkHd) {
                if (selectedCount === 0) {
                    checkHd.setChecked(false, true);
                } else if (selectedCount === allCount) {
                    checkHd.setChecked(true, true);
                } else {
                    checkHd.setChecked(null, true);
                }
            }
        }
    },
    store: 'simpsonsStore',
    columns: [{
        "xtype": "numbercolumn",
        "dataIndex": "dummyOne",
        "text": " dummyOne"
    }, {
        "xtype": "numbercolumn",
        "dataIndex": "dummyTwo",
        "text": "dummyTwo"
    }],
    bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true
    }
};
Ext.create({
    xtype: 'window',
    items: [grid],
    width: 500,
    layout: 'card',
    height: 500,
    autoShow: true
});

功能验证说明 #

修改后点击表头全选框，会自动选中所有分页的全部数据，切换分页后可以看到其他页的记录也处于选中状态，取消全选也会同步清空所有页的选中记录。

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