Загрузка глобальных Store до старта приложения

Порой вам необходимо загрузить какой либо Store до старта основного приложения, например на основе этих данных должен быть создан той или иной интерфейс. В этой статье я покажу вам, как запускать приложение после загрузки всех глобальных Store.

Процесс загрузки приложение состоит из трех этапов:

• Загрузить RIA: js, css, images и все остальное
• Загрузить глобальные store
• После загрузки всех глобальных сторов, создавать Viewport

Для этого мы расширим класс Ext.app.Application и подпишемся на событие load у store. Инициализация Viewport не выполняется, потому что свойство mainView не установлено, мы установим его с помощью setMainView после окончания загрузки всех глобальных сторов.

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');

Я вставил число загруженных store в заголовки таблиц, чтобы показать, что представление создается после загрузки store’ов.