ExtJS 4.1 MVC: How to apply LoadMask to the viewport at boot time?

Question

How to apply LoadMask for a standard ExtJS MVC application when loading the necessary files?

An example of such an MVC application is the following snippet for 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' } ] }); } }); 

where main above is the xtype for the MVC view, which can extend the ExtJS Panel , etc.

Is there a standard approach for this ubiquitous requirement?

Answer 1

What you want to do is show the loading image inside your index.html file. something like that:

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

And then hide this div in your launch() function:

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

Answer 2

The first solution is good. An alternative is:

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