Animate Viewport Remove

Question

I have a button that removes the current view to show whatever is underneath. It works just fine, except I would like to animate it. Is this possible?

The remove code that works:

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);

Sample of calling another view with animation:

var c = Ext.getCmp('NextView');
if(c === undefined) c = Ext.create('MyApp.view.NextView');
Ext.Viewport.animateActiveItem(Ext.getCmp('NextView'), {type: 'slide', direction: 'left'});

I've already tried the following with no success:

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true, {type: 'slide', direction: 'left'});

Along with:

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), {type: 'slide', direction: 'left'});

Note, I need to remove the screen (not just call another) because the component is linked throughout the app.

Answer 1

first of all: thanks to sencha for this excellent puzzle.

After reading the implementation of Container#remove() I found a possibility to use the activeitemchange event:

back: function() {
    var items,
        current,
        previous;

    items = Ext.Viewport.getItems();

    current = items.get(items.length - 1);
    previous = items.get(items.length - 2);

    Ext.Viewport.on({
        activeitemchange: 'onAfterAnimate',
        scope: this,
        single: true,
        order: 'after',
        args: [current]
    });

    Ext.Viewport.animateActiveItem(previous, {type: 'slide', direction: 'right'});
},

onAfterAnimate: function(itemToDestroy) {
    itemToDestroy.destroy();
}

Note that I used this as scope. The scope is used for the method lookup.