Sencha touch应用程序加载页面

I have a sencha touch application, but want to apply a loading mask to the entire app while the page is loading. (i.e. while the Javascript files etc are loading)

In ExtJS, I used to have a full sized div with a loading image, then as the first action of the "onReady" I used to fade that div out then remove it. Unfortunately, fadeOut() doesnt seem to be available in SenchaTouch

My app definition is as follows:

    name: 'MyApp',

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

Any pointers would be appretiated


You can make use of the Ext.LoadMask class. There is an example:

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

When you finish loading some Ajax requests or doing your task and to remove the mask, you can:



Hey you can also try this below code while doing ajax request and loading data

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

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


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


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



Here is how I go about it:


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