Splash screen для ExtJS приложения

Чтобы вывести сообщение об ожидании, при старте приложения ExtJS, требуется выполнить следующие действия.

Находим index.html файл добавляем в него следующий код

<div style="position: absolute; top: 45%; left: 45%; height: 30px; width: 50%; font-size: larger;" id="start-extjs">Загрузка ExtJS...</div>

Данное сообщение будет выводиться да начала готовности Ext.Application. 

!!! Внимание. Требуется наследоваться от It.app.Application

В файле app.js указать следующий параметр:

Ext.application({
    name: 'ImportSubstitution',
    ***
    splashscreen: true,
***

Ну вот и все!

Как это реализовано?

В базовом классе произведены следующие изменения:

    /*
     * Объект для хранения splashscreen переменной
     */
    splashscreen: null,

Добавлена переменная

 constructor: function () {
        var startExtJSMessage = Ext.get('start-extjs');
        if (startExtJSMessage)
            startExtJSMessage.hide();

        if (this.splashscreen == true) {
            // start the mask on the body and get a reference to the mask
            this.splashscreen = Ext.getBody().mask('Загрузка приложения...', 'splashscreen');
        }
        this.callParent(arguments);
    },

Переопределен конструктор

    /*
     * Инициализация splashscreen
     */
    initSplashScreen: function () {
        if (typeof this.splashscreen == 'object') {
            this.splashscreen.destroy();
        }
    },

Инициализация splashscreen

    onProfilesReady: function () {
        var me = this;
        me.loadRemotingApi(() => {
            me.initControllers();
            me.onBeforeLaunch();
            me.initSplashScreen();
            me.finishInitControllers();
        });
    },

Вызов метода

Нет комментариев

Добавить комментарий