ExtJS 4：第一次显示时窗口大小不正确答案

【问题标题】：ExtJS 4: Window not sizing correctly on first showExtJS 4：第一次显示时窗口大小不正确
【发布时间】：2016-06-25 03:57:35
【问题描述】：

我不明白为什么这段代码第一次运行：

var mypopup = Ext4.create('Suidgets.NSConfirmationBox', {
    title: 'Delete',
    message: 'Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>Do you want to delete this row? Do you want to delete this row? Do you want to delete this row?<br>',
    id: 'mypopup',
    listeners: {
        afterrender: function() {
            this.doComponentLayout();
        }
    }
});

mypopup.show();

它输出这个：

但是一旦你关闭它并在下次运行时，它会完美地呈现窗口大小：

这是小部件的代码： https://jsfiddle.net/ardimaunahan/63ofm68o/

我尝试了几个事件来触发doComponentLayout，但仍然无法生效：show、beforeshow、activate。但是，如果您通过浏览器控制台执行此操作，它会完美调整：

Ext4.getCmp('mypopup').doComponentLayout();

有人能告诉我为什么会这样吗？谢谢！

更新 1： 我检查了生成的 HTML 的差异，它在主窗口的高度和宽度上有所不同：

我想知道 Ext.window.Window 中是否有任何配置可用于修复此尺寸错误。

更新 2： 这是一个完全有效的小提琴：https://jsfiddle.net/ardimaunahan/hcg4p3v4。必须在浏览器上执行 Ctrl + F5 才能看到损坏的弹出布局。您还需要按 Esc 关闭弹出窗口。在 Firefox/Chrome 中，成功单击显示弹出按钮使布局正常，但在 IE 中仍然损坏。

【问题讨论】：

我尝试对窗口内的组件使用“tpl”，但结果相同。还检查了生成的html中的差异，只有窗口的高度和宽度不同（见上图）
仅使用提供的代码无法重现，我认为缺少 CSS。请制作一个显示问题的小提琴。
您可以尝试调用 doComponentLayout 两次或延迟 doComponentLayout 几毫秒是否有帮助。
感谢亚历山大的调查。我会尝试制作一个完整的小提琴，我也会尝试你的建议。
Alexander，两次调用 doComponentLayout 并没有解决它。我认为将 doComponentLayout 延迟几毫秒并不是一个好的用户体验。

标签： javascript extjs extjs4.2

【解决方案1】：

我担心你必须覆盖你盒子的show() 函数。

以下似乎对我有用：

show:function() {
    this.callParent(arguments);
    this.doComponentLayout();
}

我不确定这是否适用于跨浏览器，请在使用前检查。

【讨论】：

不幸的是，覆盖 show() 对我不起作用。您尝试过什么浏览器及其版本？我正在使用 Firefox 46.0.1 和 Chrome 51.0.2704.103 m

【解决方案2】：

好的，我想我找到了根本原因。它在我的 HTML 标记中，特别是这一行 (77-78)：

     "                                    style=\"padding: 10px 20px 0px 20px\"><img",
     "                                    src=\"https://firnnauriel.duckdns.org/images/icons/popup/info.gif\"><\/td>",

解决方法是将大小设置为 35 像素 x 35 像素。当我为我的组件实例指定宽度和高度 (700 x 500) 时，我发现了它。我注意到当它第一次显示时，当图标出现时它会向右移动一点。似乎因为图像是远程检索的，并且标签上没有指示尺寸，所以 Ext 框架最初不知道要为其分配多少。但是一旦图标出现并且您隐藏窗口并重新打开它，它现在将完美地计算窗口的最终宽度和高度。

【讨论】：