как сделать функцию анимации очереди в ext4.0.2a?

Question

Я пытаюсь сделать свой собственный загрузочный экран.
Это похоже на загрузочный экран в ext 3.3.1 docs, но с использованием ext 4 в качестве ядра ...

, поскольку в документах ext4 говорится, что shift анимация устарела. поэтому я заменяю shift на puff и анимацию слайда ...

пока, я могу сделать это .. здесь код;

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

но приведенный выше код выглядит неуклюже, потому что я использую defer, чтобы поставить его в очередь.
Есть ли другой способ сделать функцию в очереди?
в ext3 они используют функцию обратного вызова, чтобы она работала, но я не могу найти ее в документах ext4.
я даже попробую, все равно не повезло.

Answer 1

Вы можете указать 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

Обратите внимание на конструкцию loading.puff({duration: 500}).animate(.Это специальный обходной путь.Это нужно, потому что слойка имеет ограниченный набор параметров.И callback (из-за какой-то ошибки, я так понимаю, она должна быть там) не включена в него.

Вот демоверсия .

ОБНОВЛЕНИЕ

Поскольку callback вызывается не тогда, когда анимация полностью завершена, в некоторых случаях лучше использовать событие afteranimate (особенно в случае вызова loading.destroy();в обратном вызове):

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