ExtJS 4:第一次显示时窗口没有正确调整大小

时间:2016-06-25 03:57:35

标签: javascript extjs extjs4.2

我无法理解为什么第一次运行此代码:

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

它输出: enter image description here

但是一旦你关闭它并在下次运行时它会完美呈现窗口大小: enter image description here

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

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

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

有人能告诉我为什么会这样吗?谢谢!

更新1: 我检查了生成的HTML的差异,它在主窗口的高度和宽度上有所不同: enter image description here

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

更新2: 这是一个完全正常工作的小提琴:https://jsfiddle.net/ardimaunahan/hcg4p3v4。必须在浏览器上执行Ctrl + F5才能看到损坏的弹出窗口布局。你还需要点击Esc关闭弹出窗口。在Firefox / Chrome中,成功单击“显示弹出按钮”可以使布局正常,但在IE中它仍然会被破坏。

2 个答案:

答案 0 :(得分:0)

我担心你必须覆盖盒子的show()功能。

以下似乎对我有用:

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

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

答案 1 :(得分:0)

好的,我认为我找到了根本原因。它在我的HTML标签中专门用于此行(77-78):

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

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