Question

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:

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