Question

i’m trying to make my own loading screen.
it’s like loading screen at ext 3.3.1 docs does, but using ext 4 as the core…

since the ext4 docs say shift animation is deprecated. so i replace shift with puff and slideout animation…

so far, i can make it..
here the code ;

var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');

loading.puff({duration: 500}); //first fn

Ext.defer(function(){
    mask.slideOut('b',{duration : 500});//second fn

    Ext.defer(function(){
        mask.destroy();
        loading.destroy();//third fn
    }, 750);

}, 750);

but, code above is look awkward, cause i’m using defer to make it queued.
is there another way to make queued function ?
in ext3, they use callback function to make it works, but i can’t find it at ext4 docs.
i even try it, still no luck.

Answer 1

You can specify callback config:

loading.puff({duration: 500}).animate({callback: function(){
    mask.slideOut('b',{duration : 500, callback: function(){
        mask.destroy();
        loading.destroy();//third fn
    }});//second fn
}}); //first fn

Notice the loading.puff({duration: 500}).animate( construction. It is a special workaround. It’s needed because puff has limited set of params. And callback (due to some mistake, I quess. It has to be there) is not included in it.

Here is demo.

UPDATE

Since callback is called not when the animation is completely ended it is better to use afteranimate event in some cases (Especialy for the case of loading.destroy(); being called in callback):

loading.puff({duration: 500}).animate({callback: function(){
    mask.slideOut('b',{duration : 500, listeners: {
        afteranimate: function(){
            mask.destroy();
            loading.destroy();//third fn
        }
    }});//second fn
}}); //first fn