ExtJS window animatetarget - extjs

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!

Answer 1

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