javascript - 在 ExtJS 中缩放(调整大小)窗口或面板的高度不会动画

Question

我有以下代码来调整窗口大小，但窗口/面板的缩放似乎只适用于宽度？

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

如果我取消注释“setHeight”行，则调整大小有效，但调整大小动画消失了。有什么想法吗？

Answer 1

显然窗口不能那样缩放。

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.

一个解决方案是覆盖 Box 组件的缩放方法:

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

在 http://www.sencha.com/forum/showthread.php?65176-Window-scale()-override-problem&p=314906#post314906 找到解决方案