stateful window position?

[lrayman]

I'm trying to get a window to maintain its relative position in its container as part of its state. The problem is that the position is being saved in relation to its position in the document, but is being interpreted as being relative to the container.

In the first attached image, I have the inner window positioned at the top-left of the container. The saved state of the window has position of [126,34] - obviously that's relative to the entire window. After re-loading the window (which causes the saved state to be re-applied) it looks like the 2nd image - the window shifts down and to the right - its using the saved position, but interpreting it as relative to the container. The new saved position is [252,68]. If I reload the page again, the window again shifts down and to the right by a factor of [126,34].

What am I doing wrong?

My code follows:


Ext.define('My.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',


items : [
{
region: 'north',
html: '<h4>this is the top</h4>'
},
{
region: 'west',
html: '<h5>nav menu could go here</h5>',
collapsible: true,
split: true
},
{
region: 'center',
id: 'mainPanel',
style: { position: 'absolute' },
items: [
{
xtype: 'window',
title: 'Window 1',
height: 400,
width: 350,
autoShow: true,
stateful: true,
stateId: 'window-1',
constrain: true,
style: { position: 'absolute' }
}
]
}
]
});

[Gary Schlosberg]

I put your code into this Fiddle, but I can't recreate the issue you describe:
https://fiddle.sencha.com/#fiddle/33r

I also tried it outside of Fiddle, but still couldn't reproduce. In which version of ExtJS are you seeing this?

[LinuxDoku]

The problem is that ExtJS is saving the window state position relative to the page. At restore the X and Y coordinates of the window are set and the component initializing function is using them to positionate the window relative to the parent container.

In order to fix this I added this event to my base window class:


beforestaterestore: function (window, state) {
if (state.pos && state.pos instanceof Array) {
this.on('render', function(win) {
var parent = win.up();
win.x = state.pos[0] - parent.x;
win.y = state.pos[1] - parent.y;
}, this, { single: true });
}
}
It adds a event which is fired right after the window rendering (first time we have access to the parent object) and repositionates the window.

Sencha has to fix this (I think it's not implemented in the window setState method, cause at the state restore time there is no access to the upper container and so they can't calculate the real position. The method setPagePosition is also not working ;-)).