动画视口移除答案

【问题标题】：Animate Viewport Remove动画视口移除
【发布时间】：2013-09-09 02:20:37
【问题描述】：

我有一个按钮，可以删除当前视图以显示下面的任何内容。它工作得很好，除了我想动画它。这可能吗？

有效的删除代码：

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

用动画调用另一个视图的示例：

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

我已经尝试了以下方法但没有成功：

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

随着：

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

注意，我需要移除屏幕（不仅仅是调用另一个屏幕），因为该组件在整个应用程序中都链接在一起。

【问题讨论】：

标签： sencha-touch-2 sencha-architect

【解决方案1】：

首先：感谢 sencha 提供了这个出色的谜题。

在阅读了Container#remove() 的实现之后，我发现了使用activeitemchange 事件的可能性：

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

请注意，我将this 用作scope。 scope 用于方法查找。

【讨论】：

谁能想出一个更简洁的解决方案？