ExtJS 窗口动画目标

Posted 2023-02-26

【中文标题】ExtJS 窗口动画目标

【英文标题】：ExtJS window animatetarget

【发布时间】：2013-01-11 10:46:03

【问题描述】：

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

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

我正在使用 ExtJS 4.1

谢谢！

【参考方案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);
        
    
);

【讨论】：

嗨！我在 ExtJS 高级论坛上问了同样的问题，他们几乎给了我同样的答案。所以似乎没有办法隐式配置它。实际上，他们为我提供了一段代码，它覆盖了更适合我的用例的窗口，因为我需要它来为我的所有窗口工作。但我还是会提高你的答案。

嗨@Stephen 感谢您的接受。我想这将是几乎相同的代码，只是包装成 override?

@Stephen 只是对于您不知道的情况，您需要自己奖励赏金，它希望自动奖励给“正确”选择的答案。

赏金实际上是针对不涉及覆盖 Ext.window.Window 类的解决方案。不幸的是，这似乎也是唯一的方法，如果我的研究做得更好，我自己会发现这一点，但唉。因此，我将赏金授予您。