extJS 5.0基于选项卡选择绑定不同的存储

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

两个存储都有相同的列名，因此加载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'
    }
}

---

您应该使用以下公式：

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

---

.

在虚拟机中有一些指示活动选项卡的键。让tabchange的监听器拨出该键，然后根据所述键编写公式返回正确的存储。感谢您的建议-我的应用程序返回以下错误。你有什么想法吗？我已经在未捕获的TypeError上面更新了代码：无法读取nullUpdate的属性“set”-由于嵌套的容器，我的tabPanel侦听器中需要另一个ownerCt。现在可以了-你的解决方案很棒-谢谢你Evan。