How to perform selectAll operation of checkboxmodel with memory proxy in extjs

Question

I have a extjs grid with local paging. In order to achieve local paging, I have provided memory proxy in store. My grid also contains checkboxmodel. But my problem is that when I click on selectAll button, only current page's data is selected. Is there any way that when I click on selectAll button, the data from my proxy store should be selected which has the entire data of all pages. Please find my grid below. Thanks in advance.

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

score 1 · Answer 1 · answered Aug 11 '21 at 22:56

This is intended behaviour. Imagine you have a paged store with 10.000 rows total, showing 10 rows per page. When your users selects all, it is very unlikely that she or he wants to really select 10.000 rows, seeing only 10 rows, 1 of 1000 pages.

If you really want to do something with your entire store, checkbox selection model won't help you. You need to create a copy of your store without pageSize, and loop through it like:

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

Here store has to be a store similar to simpsonsStore, but with pageSize: undefined, so that it will contain all records. But you have to think about store size in a real word application, if it is too large, it might lead to performance problems.

score 1 · Answer 2 · answered Aug 12 '21 at 12:28

You can use the following dirty solution:

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

    }
});

How to perform selectAll operation of checkboxmodel with memory proxy in extjs

2 Answers2