Scaling (resizing) the height of a window or panel in ExtJS doesn't animate

I have the following code to resize a window, but it seems the scaling of a window/panel works only for width?

Ext.onReady(function() {
    var myWindow = new Ext.Window();
    myWindow.width = 80;
    myWindow.height = 80;
    var myButton = new Ext.Button({
        text: 开发者_开发知识库'Resize',
        handler: function(button, event){
            myWindow.el.scale(400, 400);
            //myWindow.setHeight(400);
        }
    });
    myWindow.add(myButton);
    myWindow.show();
});

The resizing works if I uncomment the 'setHeight' line, but then the resize animation is gone. Any idea?

---

Apparently the window cannot be scaled like that.

http://www.sencha.com/forum/showthread.php?118694-Scaling-(resizing)-the-height-of-a-window-(or-panel)-does-not-work&p=551012#post551012

There is no scale method in the Window class. You are programatically scaling the Window's Element without the Window's knowledge.

A solution for this is overriding the scale method for Box components:

Ext.override(Ext.BoxComponent, {
    scale: function(w, h, duration, easing) {
        var a = Ext.lib.Anim.motion(this.el, {
            height: {to: h},
            width: {to: w}
        }, duration || 0.35, easing || 'easeOut', function(){
            a.onTween.clearListeners();
        });
        a.onTween.addListener(function(){
            if (this.fixedCenter) {
                this.center();
            }
            this.syncSize();
            this.syncShadow();
        }, this);
        a.animate();
    }
});

Ext.onReady(function(){

    var scale = function () {
        win.scale(500, 400);
    }
    var win = new Ext.Window({
        fixedCenter: true,
        html: "test",
        width: 200,
        height: 200,
        buttons: [{
            text: "scale",
            handler: scale
        }]
    }).show();
});

Solution found at http://www.sencha.com/forum/showthread.php?65176-Window-scale()-override-problem&p=314906#post314906