extjs 3 - какое событие вызывается при полной загрузке extjs

Question

Я использую Extjs для своего приложения.Какое событие / прослушиватель запускается, когда extjs полностью загружает приложение (изображения и все)?

Я пытался выполнить следующее, но ни один из них не работал:

• загрузка тела или окна (тег bodyпусто)
• viewport render listener

Что я сейчас делаю: Когда я запускаю приложение, оно отображает маску "загрузки".Затем запускается ajax-запрос, и после его завершения маска «загрузки» удаляется.Следующее может дать некоторую идею:

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...
    ajax_request(); // Somewhere between the code ajax request is called
    // All components are loaded eg. viewport, tabpanel, button etc...

    function ajax_request() {
        // Other processing

        Ext.ux.mask.hide(); // Hide the mask
    }
});

Проблема в том, что запрос ajax занимает много времени, поэтому я хочу изменить что-то следующим образом:

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...
    ajax_request(); // Somewhere between the code ajax request is called
    // All components are loaded eg. viewport, tabpanel, button etc...

    function ajax_request() {
        // Other processing

        //Ext.ux.mask.hide();   // Hide the mask - removed
    }

    // I want to call this when everything is loaded on the page
    function everything_loaded() {
        Ext.ux.mask.hide(); // Hide the mask
    }

});

Любая идея на этот счет?Большое спасибо за помощь.

Answer 1

На какую версию ExtJ вы ссылаетесь? 3.x или 4.x?

Если 4.x, рассмотрите возможность использования / следования рекомендациям MVC Application Architecture . В этом случае вы хотите переопределить Ext.application.launch, как описано в Архитектура приложения MVC или Ext.app.Application

Если 3.х, я думаю, Ext.onReady() - лучшее, что у них есть.

UPDATE

Исходя из вашего обновленного вопроса, это то, что вы ищете -

Ext.onReady(function(){
    Ext.Ajax.on('beforerequest', showSpinner, this);
    Ext.Ajax.on('requestcomplete', hideSpinner, this);
    Ext.Ajax.on('requestexception', hideSpinner, this);
...
}); //end of onReady

showSpinner = function(){
  //setup and show mask
}

hideSpinner = function(){
 //hide mask
}

Ссылка - Ext.Ajax

Answer 2

на основе вашего обновления .... я пришел к выводу, что вы используете Ext версии 3.xx

Когда я запускаю приложение, оно отображает маску "загрузки".Затем запускается запрос ajax и когда он завершен , маска "загрузки" удалена

как вы назвали ajax ??почему бы вам не спрятать маску в обратном вызове ajax?

Ext.Ajax.request({
    url : "blabla",
    method : "GET",
    callback : function(){
        Ext.ux.mask.hide();
    }
});

или, может быть, вы захотите попробовать это one (это то, что я использовал для отображения предварительной загрузки)

Answer 3

Благодаря Amol и Warung Nasi 49. Хотя я не мог найти лучший путь, мне удается получить почти ожидаемый результат:

Ext.onReady(function(){
    Ext.ux.mask = new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});
    Ext.ux.mask.show();   // Show the mask

    // All components are loaded eg. viewport, tabpanel, button etc...

    setTimeout(function(){
        Ext.ux.mask.hide(); 
    }, 2000);

});

Answer 4

Попробуйте событие afterlayout и укажите метод, который будет выполняться при его запуске