Question

使用ExtJS 4，我有以下窗口：

    var mainWin = Ext.create('Ext.Window',{
    title: 'IE Screwup Illustration',
    id: 'MAINWIN',
    constrain: true,
    constrainTo: 'appdiv',
    x: 0,
    y: 0,
    width: '100%',
    height: 518,
    moveable: false,
    closable: false,
    layout: {
        type: 'border',
        padding: 3
    },
    renderTo: Ext.Element.get('appdiv'),
}).show();

请注意渲染到名为“appdiv”的元素，该元素的样式如下所示：

#appdiv {
    position: absolute;
    left: 10px;
    width: 90%;
    height: 520px;
    border: 1px solid;
    overflow: hidden;
    border-color: #000000;
}

渲染窗口没有问题。它出现在appdiv中没有问题，周围有一个漂亮的边框。

当我调整浏览器大小时，问题就出现了。看起来窗口试图将自己置于屏幕上，而不是在appdiv DIV中。这导致它在DIV内移动，使其呈现在左下角和右下角。

我尝试了各种技巧，包括尝试在调整窗口大小时重新定位窗口。似乎什么都没有用，我想不出别的什么。

有人可以在浏览器调整大小时想一想如何在DIV中保留此窗口吗？感谢...

Answer 1

我创建了一个JS Fiddle来说明我通常如何解决项目中的问题。

解决方案是收听要将窗口居中的Component的resize事件，然后计算窗口的新位置。在我的示例中，此组件是viewport。

这是听众，它完成了工作：

viewPort.on('resize', function(vp, width, height) {
    var me = this,
       winWidth = me.getWidth(),
       winHeight = me.getHeight(),
       left = (width -winWidth) / 2,
       top = (height -winHeight) / 2;

    me.setPosition(left, top);
}, mainWin);

Answer 2

我找到了问题的答案。事实证明这是一个时间问题。

Matyas建议的setPosition（）方法似乎被忽略是没有意义的，所以我检查了“move”事件。显然，当Ext窗口呈现为＆lt; div＆gt;时，它会在调整大小事件后接收移动事件。我不知道为什么（也许ExtJS内部的专家可以帮到这里？）。

因此，我没有在Matyas的调整大小监听器中进行计算，而是在mainWin中创建了一个移动监听器。我有点简单，因为我希望窗口留在＆lt; div＆gt;的左上角：

listeners: { move: function(theWin,xP,yP,theOp) { if((xP != 0) || (yP != 0)) { theWin.setPosition(0,0); } }

这样，只要浏览器将窗口移动到我想要的位置以外的位置，我就会将其设置回来。这解决了这个问题。

感谢所有回复此问题的人（包括评论）。如果没有这些回复，我就不会有解决这个问题所需的线索。

Answer 3

试试这个：

  Ext.EventManager.onWindowResize(function()
  {
    mainWin.doComponentLayout();
  }, this, {buffer: 1});

Answer 4

        Ext.EventManager.onWindowResize(function() {
            if(mainWin.isVisible()) {
                mainWin.center();
            }
        }, this, {buffer: 1});

ExtJS窗口位置在调整大小时更改

4 个答案: