Single or multiple store instances on different components?

Question

This is more like a best practice/advice that i am asking here, because i already found a solution to my problem, but i dont know:

if the "problem" should be solved;
if the solution is the best one.

Wait, let's go back a little to the issue. I have a book manager application, and it uses, among others, two kind of objects: Book and Author. As you can imagine, every Book has an Author, so, i need:

a manager to define the authors (i have used a grid);
a way to select the author for a book (i have used a combo box);

In ExtJS, this involved an Ext.grid.Panel and a Ext.form.field.ComboBox . I have used the same store (AuthorStore) on each widget, since my Author class is very simple (having only id and authorName as fields). Initially, i have used autoLoad:true property for the store, but, as i discovered here, there is a better way to do it: to load the store on render or afterrender events for the required component. I totally agree with this.

After that, i've noticed that both the grid and the combo had different store instances (each loading its data). This seemed strange to me, since, basically, both store instances hold exactly the same data. At this point, i wanted somehow to share the same store instance for both components. I did something like:

Defined a function that returns a single store instance:

function getAuthorStore(){
     return Ext.StoreMgr.lookup('authorStore') || Ext.create('BM.store.AuthorStore');
}

Changed grid's store property from store: 'AuthorStore', to store: getAuthorStore()
Did the same thing for the combo-box

Changed the AuthorStore to declare an additional property and a listener for the load event:

    storeId: 'authorStore',            
    loaded: false,
    listeners: {
        load: function(store, records, success, operation, options) {
            store.loaded = success;
            console.log('store <<' + store.storeId + '>> was fully reloaded');
        }
    }

Changed to grid's controller store property from store: 'AuthorStore', to store: getAuthorStore(). Also, the render event is added, and the following function is called:

    loadStoreIfRequired: function() {
        var me = this;
        // loads the store only if the 'loaded' custom prop is not set
        if (!me.store.loaded) {
            me.store.load();
        }
    }

Finally, i did something similar to the combo box (please note the queryMode: 'local' that is used so that the combo's store dont load itself when opening the combo items.

    ....
    queryMode: 'local',
    store: getAuthorStore(),
    listeners: {
        render: function(combo, options) {
            var store = combo.getStore();
            if (!store.loaded) {
                store.load();
            }
        }
    }

What i would like to know is the answer to the following questions:

Is the single store instance idea good or bad?
Let's assume i have some filters on the grid. These filters will cause the combo to display, let's say, less items in the combo, since they share the same store? (Therefore, in this case, the store should not be shared across multiple widgets).
If there a better/cleaner solution to this?

Thank you very much for taking your time to read my question. Please share your thoughts, if you have them.

Evan Trimboli Evan Trimboli · Accepted Answer · 2014-10-26T23:23:52

A single store is a good idea if you want to have the same data in multiple views.
That's correct, the filters will be applied across all stores.
In Ext5, the concept of "chained stores" has been implemented, see here for more information: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.ChainedStore

Single or multiple store instances on different components?

1 Answers