ExtJS 4：Window 首次显示时尺寸不正确

Question

我无法理解为什么第一次看到这段代码运行:

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

它输出这个：

但是一旦你关闭它并且下一次它是运行，它会完美呈现 window 大小：

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

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

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

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

更新 1： 我检查了生成的 HTML 的差异，主要 window 的高度和宽度不同：

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

更新二： 这是一个完全有效的 fiddle：https://jsfiddle.net/ardimaunahan/hcg4p3v4。必须在浏览器上按 Ctrl + F5 才能看到损坏的弹出式布局。您还需要按 Esc 键关闭弹出窗口。在Firefox/Chrome中，成功点击Show popup button后布局正常，但在IE中还是不行。

Answer 1

我担心你必须重写你的盒子的 show() 功能。

以下似乎对我有用：

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

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

Answer 2

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

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

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

的最终宽度和高度

ExtJS 4：Window 首次显示时尺寸不正确

ExtJS 4: Window not sizing correctly on first show

javascript

extjs

extjs4.2