Javascript 过滤ViewModel存储并实现到ExtJS面板的正确方法是什么？

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

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

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

这里是虚拟机

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

这是面板的网格示例，其中定义了两个网格。我尝试了几种方法来获取存储和过滤，但都没有成功

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.

使用连锁商店：

---

连锁店的方式肯定是最好的，

代码如下：

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

});

---

全局或等位元素存储必须是全局存储，链接的存储可以在视图的viewmodel中创建

我保持get Uncaught TypeError:无法读取null的属性“clone”，它通过store.setProxystore.getProxy.clone上的ExtJS的Search.js引发；实际上，我没有在bonusTrans商店上进行任何代理配置。Tje JSON数据通过模型加载。模型使用代理中的模式配置和api配置来访问CRUD进程的数据。我应该为链接存储定义代理吗？我尝试在bonusTrans存储上定义一个空代理：proxy:{}，这是解决错误的方法，但是视图没有显示。如果我记得很清楚，您需要像全局存储一样的everything存储，我无法回答，因为没有足够的信息。我给了你一个完全有效的例子。

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

});