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

Question

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

这是 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

使用链式店，fiddle :

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