extJS 5.0 bind different store based on tab selection - extjs

Question

Looking for some advice on how I can dynamically load data from a different datastore based on a tab that is selected.
Both stores have identical column names so loading the dataIndex should not need to be changed.
When the "Current" tab is selected I would like to bind the store "current"
When the "Completed" tab is selected I would like to bind the store "completed"
A sample of my code is below:
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());
}
}
},
And the Grid
{
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

You should do it using a formula:
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.