ExtJS 4 - How to access multiple stores from views in MVC?

I am trying to build a app in extjs 4 using the new MVC method approach. I have a grid where the user can click on a row and the editing is done Ext.window.

This Ext.window with tabs is defined in the controller as a view. I am having problems with 2 things:

1) The window has 2 grids, which I would like to have populated from a store, when the tab is c开发者_Go百科licked. When defining the grid's store, I cannot access it even though it was denied in my controller. I tried

...
xtype:'grid',
store:MyApp.store.Products
columns:[..]
...

but no luck!

Also tried to define multiple stores for the view:

Ext.define('MyApp.view.Edit', {
    extend:'Ext.window.Window',
    store:['Products','Countries']
...

But also no luck. If I have only ONE store defined in the view, I can access it with this.Countries for example.

2) My second question is partly related. The Ext.window is a form getting populated with data from the grid row that was clicked.

How can I populate one of the grids in the Ext.window form with the data that was pushed to it? Should it have an empty store by default and then have a listener on the tabclick? Or can I just push a data object into it?

Any help is appreciated.

To answer your first question, you need to reference your stores in the controller. You could do something like this in your controller

stores  : ['Products', 'Countries'],

models  : ['Products', 'Countries'],

refs: [
    {ref: 'mytabpanel', selector: 'mytabs'}
],

 init: function() {
    this.control({
        'mytabs': {
            tabchange       : this.loadTabData
        },

     //create a onProductsStoreLoad method to handle stuff
     this.getProductsStore().on({
        scope: this,
        load : this.onProductsStoreLoad
    });


loadTabData: function() {
   var activeTab = this.getMytabpanel().getActiveTab();
   //Do whatever you need
}