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

Posted 2023-03-16

【中文标题】如何在extjs中使用内存代理执行checkboxmodel的selectAll操作

【英文标题】：How to perform selectAll operation of checkboxmodel with memory proxy in extjs

【发布时间】：2021-10-15 01:02:36

【问题描述】：

我有一个带有本地分页的 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
);

【参考方案1】：

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

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

    
);

【参考方案2】：

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

如果你真的想对你的整个商店做点什么，复选框选择模型对你没有帮助。您需要创建一个没有pageSize 的商店副本，然后像这样循环遍历它：

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

这里store 必须是类似于simpsonsStore 的存储区，但使用pageSize: undefined，这样它将包含所有记录。但是你必须考虑在一个真实的应用程序中存储大小，如果它太大，可能会导致性能问题。