Results 1 to 3 of 3

Thread: stateful window position?

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2013
    Location
    NYC
    Posts
    47
    Answers
    2

    Question stateful window position?

    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:

    Code:
    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' }
                    }
                ]
            }
        ]
    });
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    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?

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Germany
    Posts
    16
    Answers
    1

    Default

    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:
    Code:
    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 ;-)).

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •