javascript ExtJS 窗口位置在调整大小时发生变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14124566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS Window Position Changing On Resize
提问by Factor Three
Using ExtJS 4, I have the following window:
使用 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();
Note the rendering to an element called "appdiv", which is a element whose style is shown below:
请注意渲染到名为“appdiv”的元素，该元素的样式如下所示：
#appdiv {
position: absolute;
left: 10px;
width: 90%;
height: 520px;
border: 1px solid;
overflow: hidden;
border-color: #000000;
}
There is no problem rendering the window. It appears within the appdiv without problems with a nice border around it.
渲染窗口没有问题。它出现在 appdiv 中，没有问题，周围有漂亮的边框。
The problem begins when I resize the browser. It appears that the window attempts to center itself on the screeninstead of within the appdiv DIV. This causes it to be displaced within the DIV so that it renders below and to the right of the left corner.
当我调整浏览器大小时，问题就开始了。该窗口似乎试图将自身居中在屏幕上，而不是在 appdiv DIV 中。这会导致它在 DIV 内移位，从而呈现在左下角的下方和右侧。
I have tried various tricks, including an attempt to reposition the window when it resizes. Nothing seems to work and I cannot think of anything else.
我尝试了各种技巧，包括尝试在调整大小时重新定位窗口。似乎没有任何效果，我想不出别的。
Could someone please give some idea how to keep this window within its DIV when a browser is resized? Thanks...
当浏览器调整大小时，有人可以提供一些想法如何将此窗口保留在其 DIV 中吗？谢谢...
回答by Matyas Matyas
I have created a JS Fiddleto illustrate how I usually solved the problem in my projects.
我创建了一个JS Fiddle来说明我通常如何解决我的项目中的问题。
The solution is to listen to the resize event of the Component over which you would like to center your window, and then calculate your window's new position. In my example this component was the viewport.
解决方案是监听您希望窗口居中的组件的调整大小事件，然后计算窗口的新位置。在我的例子中，这个组件是viewport。
Here is the listener, that gets the job done:
这是完成工作的侦听器：
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);
回答by Factor Three
I found the answer to the problem. It turns out to be a question of timing.
我找到了问题的答案。事实证明这是一个时间问题。
It didn't make sense that the setPosition() method suggested by Matyas seemed to be ignored, so I checked the "move" event. Apparently, when an Ext window is rendered to a <div>, it receives move events afterresize events. I do not know why (perhaps experts in ExtJS internals can help here?).
Matyas 建议的 setPosition() 方法似乎被忽略是没有意义的，所以我检查了“移动”事件。显然，当一个 Ext 窗口被渲染到一个 <div> 时，它会在调整大小事件后接收移动事件。我不知道为什么（也许 ExtJS 内部的专家可以在这里提供帮助？）。
So instead of doing the calculations shown in Matyas' resize listener, I created a move listener in mainWin. Mine was somewhat simpler, since I wanted the window to stay put at the <div>'s upper left corner:
因此，我没有在 Matyas 的调整大小侦听器中进行计算，而是在 mainWin 中创建了一个移动侦听器。我的有点简单，因为我希望窗口保持在 <div> 的左上角：
listeners: {
move: function(theWin,xP,yP,theOp) {
if((xP != 0) || (yP != 0)) {
theWin.setPosition(0,0);
}
}
This way, any time the browser moved the window to a position other than where I wanted it, I would set it back. This solved the problem.
这样，每当浏览器将窗口移动到我想要的位置以外的位置时，我都会将其设置回原处。这解决了问题。
Thanks for all who responded to this question (including the comments). Without those responses, I would not have had the clues I needed to solve this problem.
感谢所有回答这个问题的人（包括评论）。如果没有这些响应，我将无法获得解决此问题所需的线索。
回答by imnancysun
Try this:
试试这个：
Ext.EventManager.onWindowResize(function()
{
mainWin.doComponentLayout();
}, this, {buffer: 1});
回答by Grzegorz Maj
Ext.EventManager.onWindowResize(function() {
if(mainWin.isVisible()) {
mainWin.center();
}
}, this, {buffer: 1});
