ExtJS 4.1 MVC: ¿Cómo aplicar LoadMask a la ventana gráfica mientras se carga?

Question

¿Cómo aplicar un LoadMask para una ventana gráfica de standard ExtJS MVC application mientras está cargando los archivos necesarios?

Un ejemplo de tal aplicación MVC es el siguiente fragmento de 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' 
       }    
      ] 
     }); 
    } 
}); 

donde main anterior es un xtype para una vista MVC, que podría extender una ExtJS Panel etc.

¿Un estándar enfoque para este omnipresente requisito existe?

Answer 1

Lo que quiere hacer es mostrar la imagen de carga dentro de su archivo index.html. algo así:

<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> 

Y luego ocultar esta div en su función launch():

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

Answer 2

La primera solución es buena. Una alternativa es:

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