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

Answer 1

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.