ExtJS窗口动画目标

Question

我正在使用animateTarget来动画显示和隐藏窗口。不过，我似乎无法为这种持续时间和宽松设置任何动画选项。

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

我正在使用ExtJS 4.1

thnx！

Answer 1

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

你需要从Ext.window.Window延伸并覆盖afterShow()和onHide()私人事件处理的。在这些你可以修改适当的配置。这里是一个例子，我将这个持续时间从默认的250ms延长到500ms。而这里的工作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); 
     } 
    } 
});