ExtJS Window Position Changing On Resize - extjs

Question

Using ExtJS 4, I have the following window:
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 {
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.
The problem begins when I resize the browser. It appears that the window attempts to center itself on the screen instead 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.
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...

Answer 1

I have created a JS Fiddle to illustrate how I usually solved the problem in my projects.
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.
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);

Answer 2

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 after resize events. I do not know why (perhaps experts in ExtJS internals can help here?).
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:
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.

Answer 3

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

Answer 4

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