1

使用 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 中？谢谢...

4

4 回答 4

1

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

解决方案是侦听您希望窗口居中的组件的调整大小事件，然后计算窗口的新位置。在我的示例中，该组件是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);
于 2013-01-02T17:52:45.673 回答
1

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

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

因此，我没有在 Matyas 的调整大小监听器中进行计算，而是在 mainWin 中创建了一个移动监听器。我的稍微简单一些，因为我希望窗口保持在 <div> 的左上角：

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

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

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

于 2013-01-03T14:03:06.007 回答
0

尝试这个：

  Ext.EventManager.onWindowResize(function()
  {
    mainWin.doComponentLayout();
  }, this, {buffer: 1});
于 2014-12-29T23:48:45.850 回答
0 
        Ext.EventManager.onWindowResize(function() {
            if(mainWin.isVisible()) {
                mainWin.center();
            }
        }, this, {buffer: 1});
于 2019-04-28T19:04:17.283 回答