ExtJS window animatetarget

Question

I'm using animateTarget to animate the showing and hiding of a window. However i can't seem to set any animation options for this like duration and easing.

Only setting the duration and easing would be sufficient for me in this specific use case.

I'm using ExtJS 4.1

thnx!

score 5 · Accepted Answer · answered Jan 14 '13 at 09:50

It is possible to configure this animation but not with just additional configuration properties applied to a Ext.window.Window at creation. The animation is done with the animate method of the Ext.Element and is of type Ext.fx.Anim (see this link for config details)

You will need to extend from Ext.window.Window and override the afterShow() and onHide() private eventhandler. Within these you can modify the appropriate configs. Here's a example where I extended the duration from default 250ms to 500ms. And here's a working 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);
        }
    }
});

Hi! I Asked the same question on the ExtJS premium forum and they pretty much gave me the same answer. So it seems there is no way to implicitly configure this. Actually they provided me with a piece of code that overrides the window that fits my use case a bit better because i need this to work for all my windows. But i'll still bump up your answer. — thecodeassassin, Jan 14 '13 at 14:44
Hi @Stephen thanks for accepting. I guess it will be nearly the same code, just wrapped into a **[override](http://stackoverflow.com/questions/14254321/best-practice-for-overriding-classes-properties-in-extjs/14254627#14254627)**? — sra, Jan 14 '13 at 15:10
@Stephen Just for the case you don't know it, you need to award the bounty by yourself, it want get automatically awarded to the 'as correct' chosen answer. — sra, Jan 16 '13 at 07:11
The bounty was really meant for a solution that didn't involve overriding the Ext.window.Window class. Unfortunately it also seems that it is the only way to do it, had i done my research better i would have found that out myself, but alas. Ergo i awarded the bounty to you. — thecodeassassin, Jan 16 '13 at 07:49

ExtJS window animatetarget

1 Answers1