ExtJS 窗口动画目标

Question

我正在使用animateTarget 为窗口的显示和隐藏设置动画。但是我似乎无法为此设置任何动画选项，例如持续时间和缓动。

在这个特定的用例中，仅设置持续时间和缓动对我来说就足够了。

我正在使用 ExtJS 4.1

谢谢！

Answer 1

可以配置此动画，但不能仅在创建时将其他配置属性应用于Ext.window.Window。动画使用Ext.Element 的animate 方法完成，类型为Ext.fx.Anim (see this link for config details)

您需要从 Ext.window.Window 扩展并覆盖 afterShow() 和 onHide() 私有事件处理程序。在这些中，您可以修改适当的配置。这是一个示例，我将持续时间从默认的 250 毫秒延长到 500 毫秒。这是一个有效的 JSFiddle life-demo

Ext.define('Ext.ux.Window',{
  extend: 'Ext.window.Window',
  alias: 'widget.animatedwindow',
  initComponent: function() {
    this.callParent(arguments);
  },
  afterShow: function(animateTarget, cb, scope) {
        var me = this,
            fromBox,
            toBox,
            ghostPanel;

        // Default to configured animate target if none passed
        animateTarget = me.getAnimateTarget(animateTarget);

        // Need to be able to ghost the Component
        if (!me.ghost) {
            animateTarget = null;
        }
        // If we're animating, kick of an animation of the ghost from the target to the *Element* current box
        if (animateTarget) {
            toBox = me.el.getBox();
            fromBox = animateTarget.getBox();
            me.el.addCls(me.offsetsCls);
            ghostPanel = me.ghost();
            ghostPanel.el.stopAnimation();

            // Shunting it offscreen immediately, *before* the Animation class grabs it ensure no flicker.
            ghostPanel.el.setX(-10000);

            me.ghostBox = toBox;
            ghostPanel.el.animate({
                from: fromBox,
                to: toBox,
                duration: 500,
                listeners: {
                    afteranimate: function() {
                        delete ghostPanel.componentLayout.lastComponentSize;
                        me.unghost();
                        delete me.ghostBox;
                        me.el.removeCls(me.offsetsCls);
                        me.onShowComplete(cb, scope);
                    }
                }
            });
        }
        else {
            me.onShowComplete(cb, scope);
        }
    },
    onHide: function(animateTarget, cb, scope) {
        var me = this,
            ghostPanel,
            toBox,
            activeEl = Ext.Element.getActiveElement();

        // If hiding a Component which is focused, or contains focus: blur the focused el. 
        if (activeEl === me.el || me.el.contains(activeEl)) {
            activeEl.blur();
        }

        // Default to configured animate target if none passed
        animateTarget = me.getAnimateTarget(animateTarget);

        // Need to be able to ghost the Component
        if (!me.ghost) {
            animateTarget = null;
        }
        // If we're animating, kick off an animation of the ghost down to the target
        if (animateTarget) {
            ghostPanel = me.ghost();
            ghostPanel.el.stopAnimation();
            toBox = animateTarget.getBox();
            ghostPanel.el.animate({
                to: toBox,
                duration: 500,
                listeners: {
                    afteranimate: function() {
                        delete ghostPanel.componentLayout.lastComponentSize;
                        ghostPanel.el.hide();
                        me.afterHide(cb, scope);
                    }
                }
            });
        }
        me.el.hide();
        if (!animateTarget) {
            me.afterHide(cb, scope);
        }
    }
});