Best practice to have the same view and store multiple times in ExtJS 4

Question

I would like to have different instances of the same view with different stores at the same time in an ExtJS application. At the moment i ceate multiple instances of the same view (Ext.view.View) in the viewport.

But what is the best practice to have a different store in every view? Every example that i found uses a Store-ID in the view that was created using the stores-Config of the controller. But this would use the same store for every view.

At the moment i figured the following possible solutions:

1. Create an own store class for every view instance. Add all stores to controller and use different Store-ID for every view instance.
2. Do not use stores of controller at all and create a new store in the initComponent of the view manually passing different parameters to each instance of the store.
3. Do not use stores of controller at all and create a new store in the initComponent of the view manually. Then use load to load the store manually using different parameters for each instance of the store.

Is any of this solutions the best practice or should it be done differently?

Answer 1

The thing with the stores array of the controller is, that it will override any storeId defined. After loading the store class the controller set the storeId by a namespace convention, create the store and create the getter method method by using the value as the soreId.

Let me introduce option 4

• Define one store for the view and require it in the view (you can also require it within the controller, just use the requires array).
• Choose valid itemId's for the views and valid storeId's for your store that should depend on the itemId of the view (set it when creating the view!).
• Within the initComponent create the storeId and lookup the store in the StoreManager. If it not exist create it and supply a Customer config and the storeId.

If you need to destroy the view and the store each time take a look at this post

Demo initComponent

initComponent: function() {
    var me = this,
        storeId = me.storeId + me.itemId;
    me.store = Ext.StoreManager.lookup(storeId);
    if(me.store === null)
        me.store = Ext.create('App.data.CustomViewStore',Ext.apply({storeId: storeId},me.storeCfg || {}));
    me.callParent(arguments);
}

Note: If you load the view with the views array you will end up with a getter that may not give you the view you expected. You may use the requires array of the controller here, too. If you want to use getter simply create your own one by using the refs config.