筛选ViewModel存储并实现到ExtJS Panel的正确方法是什么？

Question

通过ViewModel存储，我得到了这个JSON数据。

{
    "success": true,
    "msg": "OK",
    "count": 2,
    "data": [
        {
            "firstname": "BLA",
            "lastname": "BLALA",
            "isactive": true,
            ...
        },
        {
            "firstname": "BLAAA",
            "lastname": "BLALAAA",
            "isactive": false,
            ...
        }

我在一个panel上有两个网格 ，其中一个仅使用isactive: true加载数据isactive: true字段，其他网格仅使用false加载数据。 那么我需要在哪里以及如何过滤存储以将指定数据加载到网格 ？

这是VM；

Ext.define('MyApp.view.ListingVM', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.listing',

    requires: [...],
    reference: 'loyaltyvm',

    stores: {

        // Should I define the filter on here?
        bonusTrans: {
            storeId: 'bonusTrans',
            // reference: 'bonusTrans',
            model: 'MyApp.model.BonusTrans',
            autoLoad: true,
            session: true,
            pageSize: MyApp.Globals.LIST_PAGE_SIZE
        }
    }
});

这是panel的网格示例，其中定义了两个网格。 我尝试了几种获取store和过滤的方法，但是不能成功；

getColumns: function () {
    var me = this;

    var panelItems = [
        {
            xtype: 'container',
            layout: {type: 'hbox', align: 'stretch', pack: 'start'},
            items: [
                    xtype: 'bonustrans',
                    flex: 1,
                    title: 'Current Bonus',
                    getListCols: function () {
                        var me = this;
                        debugger;
                        // var activeStore = Ext.getStore('bonusTrans');
                        // var activeStore = me.viewModel.get('bonusTrans');
                        // var view = me.getView();
                        // var vm = view.getViewModel();
                        // var vm.getStore('bonusTrans')
                        // var activeStore = me.getViewModel().getStore('bonusTrans');

                        var activeStore = me.getViewModel('loyaltyvm').getStores('bonusTrans');
                        activeStore.filter('isactive', 'true');

                        var listCols = [
                            {
                                xtype: 'firstnamecol',
                                flex: 1
                            },
                            {
                                xtype: 'checkoutcol'
                            },
                            {
                                xtype: 'bonustotalcol'
                            }
                        ];
                        return listCols;
                    }
                    //... other Grid is just defined below of this line and it should loads data only with 'isactive' field is false.

Answer 1

使用连锁商店， 摆弄 ：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        new Ext.container.Viewport({
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            viewModel: {
                stores: {
                    everything: {
                        autoLoad: true,
                        proxy: {
                            type: 'ajax',
                            url: 'data1.json'
                        }
                    },
                    active: {
                        type: 'chained',
                        source: '{everything}',
                        filters: [{
                            property: 'active',
                            value: true
                        }]
                    },
                    inactive: {
                        type: 'chained',
                        source: '{everything}',
                        filters: [{
                            property: 'active',
                            value: false
                        }]
                    }
                }
            },
            items: [{
                flex: 1,
                xtype: 'gridpanel',
                title: 'Active',
                bind: '{active}',
                columns: [{
                    dataIndex: 'name'
                }]
            }, {
                flex: 1,
                xtype: 'gridpanel',
                title: 'Inactive',
                bind: '{inactive}',
                columns: [{
                    dataIndex: 'name'
                }]
            }]
        });
    }
});

Answer 2

连锁商店的方式肯定是最好的， 在这里您可以看到经典的工作方式

这是代码：

Ext.application({
name: 'Fiddle',

launch: function () {

    var storeAll = Ext.create('Ext.data.Store', {
            storeId: 'storeAll',
            fields: [{
                name: 'firstname'
            }, {
                name: 'lastname'
            }, {
                name: 'active'
            }],
            data: [{
                firstname: 'test1',
                lastname: 'test1',
                active: true
            }, {
                firstname: 'test2',
                lastname: 'test2',
                active: true
            }, {
                firstname: 'test3',
                lastname: 'test3',
                active: false
            }]
        }),
        chainedStoreActive = Ext.create('Ext.data.ChainedStore', {
            source: storeAll,
            filters: [{
                property: 'active',
                value: true
            }]
        }),
        chainedStoreNoActive = Ext.create('Ext.data.ChainedStore', {
            source: storeAll,
            filters: [{
                property: 'active',
                value: false
            }]
        });

    Ext.create({
        xtype: 'viewport',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'gridpanel',
            title: 'grid ALL',
            store: storeAll,
            columns: [{
                text: 'First Name',
                dataIndex: 'firstname'
            }, {
                text: 'Last Name',
                dataIndex: 'lastname'
            }],
            flex: 1
        }, {
            xtype: 'gridpanel',
            title: 'grid active',
            store: chainedStoreActive,
            columns: [{
                text: 'First Name',
                dataIndex: 'firstname'
            }, {
                text: 'Last Name',
                dataIndex: 'lastname'
            }],
            flex: 1
        }, {
            xtype: 'gridpanel',
            title: 'grid inactive',
            store: chainedStoreNoActive,
            columns: [{
                text: 'First Name',
                dataIndex: 'firstname'
            }, {
                text: 'Last Name',
                dataIndex: 'lastname'
            }],
            flex: 1
        }],

        renderTo: Ext.getBody()
    });
}

});

全局或“ Allelements”存储区必须是全局存储区，可以在视图的视图模型中创建链接的存储区。