CODEWITHSUNDEEP
javascriptextjsstoreextjs3
user1609268
user1609268

Reputation:

Wait for multiple ExtJS store loaded

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

Upvotes: 1

Views: 4300

Answers (2)

byte_slave
byte_slave

Reputation: 1378

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.

Upvotes: 0

egerardus
egerardus

Reputation: 11486

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:

  1. 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.

  2. Check if all needed stores are now inside the myGridPanelsContainer.loadedStoresArray

  3. If they are then create the grid.

  4. If not then do nothing.

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

Upvotes: 2

Related Questions