javascript - ExtJS Classic：为窗口的 x/y/width/height 设置动画时，标题未在指定的最终位置结束

Question

使用 ExtJS 经典 7.3.0

尝试在窗口显示时为其设置动画，但窗口的标题并未按照“TO”配置中的规范结束。小提琴在这里：Sencha Fiddle

如果您尝试通过单击“蓝色标题”来拖动窗口，您将看到整个标题应有的样子，但仅此而已。

任何人都知道我是否需要在这里指定其他内容？

Answer 1

width: '50%' 

似乎也有效。

Answer 2

我稍微修改了一下，发现如果你在窗口上设置 width 属性，它就可以工作：

width: Ext.getBody().getViewSize().width / 2,

完整代码：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.Window', {
            id: 'win',
            title: "Window",
            width: Ext.getBody().getViewSize().width / 2,
            html: "<h1>Hello</h1> ",
            listeners: {
                show: function (win) {
                    var el = win.getEl();
                    var size = Ext.getBody().getViewSize();
                    el.animate({
                        from: {
                        opacity: 0,
                        width: 0,
                        height: 0,
                        x: size.width/2,
                        y: size.height/2
                    },
                    to: {
                        opacity: 100,
                        width: size.width/2,
                        height: size.height/2,
                        x: size.width/4,
                        y: size.height/4
                    },
                    
                    });
                },
                beforeclose: function (win) {
                    if (!win.shouldClose) {
                        win.getEl().fadeOut({
                            duration: 2000,
                            callback: function () {
                                win.shouldClose = true;
                                win.close();
                            }
                        });
                    }
                    return win.shouldClose ? true : false;
                }
            }
        }).show();

    }
});