ExtJS4 - store instance on panel?

Question

I am really new to the MVC pattern in Ext. I have a tabpanel with several instances of the same component (let its product be called), everyone should call the server when it is opened with the id parameter.

Right now, to create these tabs - I use this in the Product controller. What creates a new instance of the view, but I feel that it is really wrong.

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

I call this from my "main" controller, for example:

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

What is the correct way to correctly use multiple instances of a view, each of which has an instance of the same repository and behavior (via the controller).

Can I use a single named store for them (with the js file in app / store / product.js)?

Should I manually call load in the storage from the controller (to pass productId ) or is there a better way?

Answer 1

This is a very broad and interesting question that requires a large and detailed explanation (which you can find on Sencha.com in your guides and guides). I would like to highlight a couple of points so that you have a place to start:

• Shops are usually global objects. You do not keep two copies of one store as a whole. You can use filtering (local or remote) if you need to present information from this store in several different views. The only time you need to clone a repository is that you want to simultaneously present other information from this store in two different views.

• Controllers are usually generated by the main application object. You do not need to do anything special - just list them in the controllers: [] property. And then it is used at application startup (before their representations are created and displayed). Remember.

• If you have a modal view, it’s normal to create it manually and either reuse it, or destroy and recreate it later. You can add filtering and loading to the controller that creates these views. And you can reuse the same view / controller objects for different tabs if you want.

• If your views represent one instance of the object (for example, one product is displayed on each tab) - do not attach repositories to these views. Just give them an individual model (record).

Answer 2

I would recommend creating stores that apply only to this instance of the view inside the view initComponent method.

The controllers' handlers must be encoded so that they can distinguish between what kind of event sent. This should not be too complicated, because almost all viewing events contain a link to the component that triggered the event. Then you can use relative query selectors, for example: myEventFiringComponent.up('anotherComponent') or myEventFiringComponent.down('anotherComponent') to get a handle to another component in the same view if you need to.

Please see this post for a full explanation.