Wait for multiple ExtJS store loaded

Question

I have multiple stores (JSON) used in different places in my code. One use is to aggregate these into one new store (wich has already have their owns datas), depending on some conditions.

For example, I have two store : one with position_id, position_name and other containing role_id, role_name. Now there's an another store partially initialized and I want to use two precedents stores to complete it.

Ex: StoreRoles : role_id, role_value StorePositions : position_id, position_value StoreLineup : lineup_id, participant, role_id, role_value, position_id, position_value

And when StoreLineup is being created, I want to role_value and position_value take values depending on theirs ids.

That works, but not always. In fact StoreRoles and StorePositions are not always ready when ExtJS passed to StoreLineup initialization's. Finally, datas are not always set and I get some JavaScript errors on this point (because I use get() on an in existing element).

So I would like to delay initialization of StoreLineup. While two others stores are not loaded, StoreLineup must be not too. It must be created after complete creation of others stores.

But how to do it ? I didn't find any working solutions (using load event etc). Goal is to render complete StoreLineup in a GridPanel.

I use ExtJS 3.4

score 2 · Accepted Answer · edited May 23 '17 at 11:43

2

This is much easier in 4.x using the store's isLoading method like this.

But for 3.4 you can accomplish it using load listeners.

Attach a load listener on all of the stores that you want loaded before creating your grid panel.

In listener do the following:

Put the loaded store into an array, you can attach the array to the grid's parent container so that it doesn't have global scope. E.g. myGridPanelsContainer.loadedStoresArray or something.
Check if all needed stores are now inside the myGridPanelsContainer.loadedStoresArray
If they are then create the grid.
If not then do nothing.

When the last store loads the load listener will create the grid.

edited May 23 '17 at 11:43

Community

1
1

answered Oct 03 '12 at 16:47

egerardus

11,316
12
80
123

Thanks a lot ! I use your solution and it works fine. Except I don't create the grid relatives of stores status, but load the LineupStore if all others stores (which it depends) are fully loaded. So the grid is populated only when LineupStore is loaded. – Oct 04 '12 at 08:56

score 0 · Answer 2 · answered Jan 29 '13 at 23:21

Just a tip, using a Ext.util.MixedCollection instead of an array can be of a better convinience.

Ext.define('My.app.StoreLoader', {
    extend: 'Ext.util.MixedCollection',
    singleton: true,
    register: function (item) {
        this.add(item);
    },
    unregister: function (item) {
        this.remove(item);
    },
    getKey: function (o) {
        return o.instanceId;
    },
    storeloadCallback: function (id, data) {
        var item = this.get(id);
        if (item) {
           this.unregister(item);

            //do more stuff if needed, like fire custom events, etc
       }
    }
});

This example is based in the amazing "Multi file uploader" from Ext4All

The same principle is used here, but instead of stores loading, its file uploading, though the behaviour us the very same.

Wait for multiple ExtJS store loaded

2 Answers2