ExtJS 4.1 MVC: come applicare LoadMask a viewport durante il caricamento?

Question

Come applicare un LoadMask per il viewport di standard ExtJS MVC application mentre sta caricando i file richiesti?

Un esempio di tale applicazione MVC è il seguente frammento di app.js:

Ext.Loader.setConfig({enabled:true}); 

Ext.application({ 
    requires: [ 
     'Ext.container.Viewport', 
    ], 

    name: 'APP', 
    appFolder: 'app', 

    controllers: [ 
     'Main' 
    ], 

    launch: function() { 

     Ext.create('Ext.container.Viewport', { 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'main' 
       }    
      ] 
     }); 
    } 
}); 

dove main sopra è un xtype per una vista MVC, che potrebbe estendere un ExtJS Panel ecc

Effettua uno standard di approccio per questo requisito ubiquitous esiste?

Answer 1

Quello che vuoi fare è mostrare l'immagine di caricamento all'interno del tuo file index.html. qualcosa di simile:

<div id="page-loader"> 
    <img style="position:absolute; width:128px; height:15px; left:50%; top:50%; margin-left:-64px; margin-top: -7px;" src="resources/images/loader.gif" /> 
</div> 

E poi nascondere questo div nella funzione launch():

if (Ext.get('page-loader')) { 
    Ext.get('page-loader').remove(); 
} 

Answer 2

La prima soluzione è buona. Un'alternativa è:

http://blog.newbridgegreen.com/extjs-4-splash-screen/