如何在extjs中使用内存代理进行checkboxmodel的selectAll操作

Question

我有一个带有本地分页的 extjs 网格。 为了实现本地分页，我在store中提供了内存代理。 我的网格还包含复选框模型。 但我的问题是，当我单击 selectAll 按钮时，仅选择当前页面的数据。 有什么方法可以让当我单击 selectAll 按钮时，应选择代理存储中的数据，其中包含所有页面的全部数据。 请在下面找到我的网格。 预先感谢。

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',
    },
    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
});

Answer 1

这是有意的行为。假设您有一个总共 10,000 行的分页存储，每页显示 10 行。当您的用户选择全部时，她或他不太可能真正选择 10,000 行，只看到 10 行，即 1000 个页面中的第 1 个。

如果你真的想对整个商店做点什么，复选框选择模型不会帮助你。您需要创建一个不带

pageSize

的商店副本，然后循环遍历它，如下所示：

store.each(function (model) {
   // do something with model, which is practically a row in the store
});

这里

store

必须是一个类似于

simpsonsStore

的存储，但带有

pageSize: undefined

，这样它将包含所有记录。但你必须考虑实际应用程序中的存储大小，如果太大，可能会导致性能问题。

Answer 2

您可以使用以下脏液解决方案：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        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',
            },
            store: 'simpsonsStore',
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    xtype: 'button',
                    text: "Select All",
                    handler: function () {
                        var grid = this.up('grid'),
                            store = grid.getStore();
                        var allRecords = store.getProxy().getReader().rawData.reduce((akku, modelData) => {
                            var pageRecord = store.getById(modelData.id);
                            if (pageRecord) {
                                akku.push(pageRecord);
                            } else {
                                akku.push(store.createModel(modelData));
                            }

                            return akku;
                        }, []);
                        grid.getSelectionModel().select(allRecords);
                        console.log(grid.getSelection());
                    }
                }, {
                    xtype: 'button',
                    text: "Console Log Selection",
                    handler: function () {
                        console.log(this.up('grid').getSelection());
                    }
                }]
            }],
            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
        });

    }
});