View Full Version : [js] Start Ext.Application after all stores are loaded.

Angelo Michel
14 Feb 2012, 2:10 AM
Hi there,

I have a clean directory for my code, which I like to keep this way.

/controllers (I have 6 controllers)
/models (I have 5 models)
/stores (I have 5 stores, 3 essential!)
/views (I have 5 views)

I have also an App in the root that 'launches' my app.
I have a main grid in my app, which depends on several stores (3 essential stores).

What I would like: Only when all stores are loaded I want the application to start.

What I don't want:
Solutions who render the application first and the stores after/during this time. I really need it to be before.

I have seen countless of people run in to the problem, but no one could provide me a real solution for the Ext.Application form. Most make the stores in an Array with stores, and loop them, calling application when they have all loaded. I have the stores nicely put in a folder, and I would like to keep em there.

So this:

listOfAllStores = [{storeId:"...", property: "...", etc..},{storeId:"...", property: "...", etc..}]

Is a NO go for me. I am really looking for a cleaner way, because I ensist on keeping my code clean.

What would be cool, is something like this in my app.js

listOfAllStores = Ext.MagicThingIDontKnow.getDefinedStores();
Ext.each( listOfAllStores, function(store) {
if store.somethingICannotFind.checksIfIsLoadedOnce()

Where the removeFromList code (or anything like that) checks if there are any unloaded left, if not, call a callback or start the app.

14 Feb 2012, 5:27 AM
In the launch method of Ext.application you can look to see if all stores are loaded. Those that aren't listen for the load event. Once all stores are loaded, then go ahead and create your view(s)

Angelo Michel
14 Feb 2012, 5:47 AM
Would be great, but I have come up with something like this:

createPanel = -> app's layout panel here..

storesToLoad = ['MyStore1', MyStore2', 'MyStore3', 'MyStore4']
tries = 0

tryToProceed = ->
if tries is storesToLoad.length
Ext.each storesToLoad, (storeKey)-> Ext.StoreManager.get(storeKey).on 'load', tryToProceed

Which works.. almost. In the Ext.application, the defined controllers are already initialized. My onLaunch function in my controller is fired even before the panels are created.

Do I need another kind of controller event now that I need to wait for the stores to load and the panels to be rendered? (is there something like onViewReady ?)