extJS 5.0 根据选项卡选择绑定不同的商店

Question

寻找一些关于如何根据所选选项卡从不同数据存储区动态加载数据的建议。

两个存储具有相同的列名，因此加载 dataIndex 不需要更改。

选择“当前”选项卡时，我想绑定商店“当前”

选择“完成”选项卡时，我想绑定商店“已完成”

我的代码示例如下：

viewModel: {
    formulas: {
                activeStore: function(get) {
                    var active = get('active');
                    return this.getStore(active == 'aTab' ? 'a' : 'b');
                }           
    },
    data: {
        active: 'aTab'
    },
    stores: {
        a: 'Change',
        b: 'ChangeArchive',
    }
},
{   
            xtype: 'tabpanel',
            id: 'changetabs',
            tabBarHeaderPosition: 1,
            headerPosition: 'top',
            plain: true,
            width: 480,
            height: 30,
            items: [{ 
                title: 'Current',
                itemId: 'aTab'
                },
                {
                title: 'Completed',
                itemId: 'bTab'
                }
            ],
            listeners: {
                tabchange: function(tabPanel, newTab) {
                    tabPanel.ownerCt.getViewModel().set('active', newTab.getItemId());
                }
            }
},

还有网格

{
    region: 'west',
    xtype: 'grid',
    bind: {store: '{activeStore}'},
    viewConfig: {
        markDirty: false
    },
    id: 'ActionList',
    columns: {
        items: [
            { text: 'Action', dataIndex: 'action_id', width: 300},
            { text: 'Status', dataIndex: 'status', width: 180},
        ]
    },
    listeners: {
        select: 'onSelectAction'
    }
}

Answer 1

你应该用公式来做：

Ext.define('Foo', {
    extend: 'Ext.data.Model'
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        new Ext.container.Viewport({
            layout: 'border',
            viewModel: {
                formulas: {
                    activeStore: function(get) {
                        var active = get('active');
                        return this.getStore(active == 'aTab' ? 'a' : 'b');
                    }
                },
                data: {
                    active: 'aTab'
                },
                stores: {
                    a: {
                        model: 'Foo',
                        data: [{
                            foo: 1
                        }]
                    },
                    b: {
                        model: 'Foo',
                        data: [{
                            foo: 2
                        }]
                    }
                }
            },
            items: [{
                region: 'west',
                xtype: 'grid',
                width: 200,
                bind: '{activeStore}',
                columns: [{
                    dataIndex: 'foo'
                }]
            }, {
                region: 'center',
                xtype: 'tabpanel',
                items: [{
                    title: 'A',
                    itemId: 'aTab'
                }, {
                    title: 'B',
                    itemId: 'bTab'
                }],
                listeners: {
                    tabchange: function(tabPanel, newTab) {
                        tabPanel.ownerCt.getViewModel().set('active', newTab.getItemId());
                    }
                }
            }]
        });
    }
});

Fiddle.