If you are going to implement localization, internationalization or permissions mechanisms in your RIA, you will have to load the initial data and at the base of this data create appropriate GUI. In this post I will show you how to launch the application after all the global stores are loaded.

The loading process consists of 3 steps:

1. load RIA: javascripts, css, images…
2. load initial data (global stores)
3. at the base of initial data launch the Viewport.

To achieve this goal I have extended the  ‘Ext.app.Application‘ class and added single listeners to the global stores. The initialization of the Viewport does not taking place because the ‘mainView‘ property is not set, instead I have called ‘setMainView‘ method after the load of all the global stores.

Ext.define('app.application', {
    extend: 'Ext.app.Application',
    name: 'app',

    requires: [
        'app.view.Main',
        'app.view.InitWindow'
    ],

    stores: [
        'Countries0',
        'Countries1',
        'Countries2',
        'Countries3'
    ],

    launch: function () {
        this.getInitWindow().show();
        this.initGlobalStoresLoadEvents();
    },

    initGlobalStoresLoadEvents: function () {
        var globalStore;
        Ext.Array.each(this.stores, function (storeClassName) {
            globalStore = this.getGlobalStoreByClassName(storeClassName);
            if (globalStore) {
                globalStore.on(
                    'load',
                    this.areGlobalStoresLoaded,
                    this, {
                        single: true
                    }
                );
            }
        }, this);
    },

    areGlobalStoresLoaded: function (store) {
        var allGlobalStoresLoaded = true,
            globalStore;
        this.getInitWindow().setMessage(store.title + " are loaded successfully.");
        Ext.Array.each(this.stores, function (storeClassName) {
            globalStore = this.getGlobalStoreByClassName(storeClassName);
            if (globalStore && !globalStore.isLoaded()) {
                allGlobalStoresLoaded = false;
                return false;
            }
        }, this);

        if (allGlobalStoresLoaded) {
            this.setMainView('app.view.Main');
            this.getInitWindow().hide();
        }
    },

    getGlobalStoreByClassName: function (className) {
        var globalStore = className.split('.').pop();
        globalStore = Ext.StoreManager.lookup(globalStore);
        return globalStore;
    },

    getInitWindow: function() {
        if(!this.initWindow) {
            this.initWindow = Ext.create('app.view.InitWindow', {});
        }
        return this.initWindow;
    }
});
Ext.application('app.application');

I have inserted the number of loaded countries in the titles of grids to show that the view is created after the stores are loaded.