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

Window类中没有scale方法。在没有Window知识的情况下，您以编程方式缩放Window的元素。

对此的解决方案是覆盖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

找到解决方案

在ExtJS中缩放（调整大小）窗口或面板的高度不会设置动画

1 个答案: