Sencha touch application loading mask

Question

I have a sencha touch application, but want to apply a loading mask to the entire app while the page is loading. (ie 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:

Ext.application({
    name: 'MyApp',

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

Any pointers would be appretiated

Answer 1

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

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

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

myMask.hide();

Answer 2

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(){        

                        mask.show();
                });


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

                        mask.hide();
                });             


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

                });

Answer 3

Here is how I go about it:

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

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