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

wa7juj8i  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(125)

我有一个带有本地分页的extjs网格。为了实现本地分页,我在store中提供了内存代理。我的网格还包含checkboxmodel。但我的问题是,当我单击selectAll按钮时,只有当前页面的数据被选中。有没有什么办法,当我单击selectAll按钮时,从我的代理存储的数据应该被选择,它有所有页面的全部数据。2请在下面找到我的网格。3提前感谢。

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
});
quhf5bfb

quhf5bfb1#

这是预期的行为。假设您有一个分页储存区,总共有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,这样它将包含所有记录。但是你必须考虑在一个真实的的word应用程序中的存储大小,如果它太大,可能会导致性能问题。

bis0qfac

bis0qfac2#

您可以使用以下脏溶液:

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

    }
});

相关问题