ExtJS4 - Store per panel instance?

Question

I'm really new to the MVC pattern in Ext. I have a tabpanel with multiple instances of the same component (let's call it product), each should call the server when it's opened, with an id parameter.

Right now, in order to create these tabs - I use this in the Product controller Which creates a new instance of a view, but I feel like it's really incorrect.

createMainView: function (opts) {
    return Ext.widget("productDisplay", opts);
}

I call it from my "main" controller, like this:

var tab = this.application.getController("Products")
    .createMainView({ productId : id, closable: true })

tabs.add(tab);
tabs.setActiveTab(tab);

What's the correct way to properly use multiple instances of a view, each having an instance of one store and behavior (via the controller).

Can I use one named store for them (with a js file under app/store/product.js)?

Should I manually call load on the store from the controller (to pass the productId), or is there a nicer way?

Answer 1

It's kind of very broad and interesting question which require big and thorough explanation (which you can find btw on the Sencha.com in their guides and manuals). I would like highlight couple points so you have something to start with:

1. Stores are usually global objects. You don't keep two instances of one store in general. You can use filtering (local or remote) if you need to present information from the that store in several different views. The only time you would need to clone store is if you want to present different information from that store in 2+ different views at the same time.

2. Controllers are usually spawned by main application object. You don't have to do anything special - just list them in the controllers: [] property. And then spawed when application is launched (before their views are created and rendered). Keep that in mind.

3. If you have modal view - it's ok to create it manually and either re-use it or destroy and re-create later. You can add filtering and loading to controller which creates these views. And you can re-use same view/controller objects for different tabs if you want.

4. If your views are presenting one instance of an object (like one product is displayed on each tab) - don't attach stores to those views. Just pass them individual model (record).

Answer 2

I would recommend creating the stores that relate only to that view instance inside of the view's initComponent method.

Your controller's control handlers should be coded in a way that they can differentiate which view dispatched the event. This should not be too difficult because almost all view events contain a reference to the component which fired the event. You could then use the relative query selectors, e.g.: myEventFiringComponent.up('anotherComponent') or myEventFiringComponent.down('anotherComponent') to get a handle on a different component in the same view if you need to.

Please see this post for a full explanation.