Sencha touch aplicação carregando máscara - javascript, sencha-touch

Eu tenho um aplicativo sencha touch, mas desejo aplicar uma máscara de carregamento a todo o aplicativo enquanto a página está sendo carregada. (ou seja, enquanto os arquivos Javascript etc. estão carregando)

No ExtJS, eu costumava ter um div de tamanho completo com umcarregando imagem, então como a primeira ação do "onReady" eu usei para esmaecer aquele div e removê-lo. Infelizmente, fadeOut () não parece estar disponível no SenchaTouch

Minha definição de aplicativo é a seguinte:

Ext.application({
name: "MyApp",

launch: function() {
Ext.create("Ext.Panel", {
fullscreen: true,
html: "Hello World"
});
}
});

Quaisquer dicas seriam apreciadas

Respostas:

Você pode usar a classe Ext.LoadMask. Há um exemplo:

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

Quando terminar de carregar algumas solicitações Ajax ou de fazer sua tarefa e remover a máscara, você pode:

myMask.hide();

Ei, você também pode tentar o código abaixo enquanto faz a solicitação Ajax e carrega os dados

var mask = new Ext.LoadMask(Ext.getBody(), {msg:"wait msg..."});


Ext.Ajax.on("beforerequest", function(){

mask.show();
});


Ext.Ajax.on("requestcomplete", function(){

mask.hide();
});


Ext.Ajax.on("requestexception", function(){

});

É assim que eu faço:

Ext.getBody().mask().addCls("black-background");

.black-background {
opacity: 1;
background: black;
}