Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    905
    Vote Rating
    40
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default [4.1.3] Stateful window position is STILL incorrect.

    [4.1.3] Stateful window position is STILL incorrect.


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.3


    Browser versions tested against:
    • Firefox 16


    DOCTYPE tested against:
    • html


    Description:

    Steps to reproduce the problem:
    • Use provided sample.
    • Open window, close it, open again, move it, close it, etc.


    The result that was expected:
    • Window should retain its last position.


    The result that occurs instead:
    • window XY is out by the offset of its container.


    Test Case:


    Code:
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Ext Testing</title>
    
    
    
    
        <!-- Ext includes -->
        <script type="text/javascript" src="/extjs-4.1.3/ext-all-debug.js"></script>
        <!-- <script type="text/javascript" src="/Altus/app/FrameworkFixes.js"></script> -->
    
    
        <!-- CSS -->
        <link rel="stylesheet" href="/extjs-4.1.3/resources/css/ext-all.css" type="text/css">
    
    
    
    
        <script type="text/javascript">
    Ext.require([
        'Ext.grid.*',
        'Ext.window.Window',
        'Ext.container.Viewport',
        'Ext.layout.container.Border',
        'Ext.state.*',
        'Ext.data.*'
    ]);
    
    
    
    
    Ext.define('Person', {
        extend: 'Ext.data.Model',
        fields: ['first', 'last', 'review', {
            name: 'age',
            type: 'int'
        }]
    });
    
    
    
    
    Ext.onReady(function(){
    
    
    
    
        // setup the state provider, all state information will be saved to a cookie
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
    
    
    
        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'border',
                padding: '5'
            },
            items: [{
                region: 'north',
                styleHtmlContent: true,
                height: 150,
                bodyPadding: 5,
                split: true,
                html: [
                    'Between refreshes, the grid below will remember',
                    '<ul>',
                        '<li>The hidden state of the columns</li>',
                        '<li>The width of the columns</li>',
                        '<li>The order of the columns</li>',
                        '<li>The sort state of the grid</li>',
                    '</ul>'
                ].join('')
            }, {
                bodyPadding: 5,
                region: 'west',
                title: 'Collapse/Width Panel',
                width: 200,
                stateId: 'statePanelExample',
                stateful: true,
                split: true,
                collapsible: true,
                html: [
                    'Between refreshes, this panel will remember:',
                    '<ul>',
                        '<li>The collapsed state</li>',
                        '<li>The width</li>',
                    '</ul>'
                ].join('')
            }, {
                region: 'center',
                stateful: true,
                stateId: 'stateGridExample',
                xtype: 'grid',
                store: Ext.create('Ext.data.Store', {
                    model: 'Person',
                    data: [{
                        first: 'John',
                        last: 'Smith',
                        age: 32,
                        review: 'Solid performance, needs to comment code more!'
                    }, {
                        first: 'Jane',
                        last: 'Brown',
                        age: 56,
                        review: 'Excellent worker, has written over 100000 lines of code in 3 months. Deserves promotion.'
                    }, {
                        first: 'Kevin',
                        last: 'Jones',
                        age: 25,
                        review: 'Insists on using one letter variable names for everything, lots of bugs introduced.'
                    }, {
                        first: 'Will',
                        last: 'Zhang',
                        age: 41,
                        review: 'Average. Works at the pace of a snail but always produces reliable results.'
                    }, {
                        first: 'Sarah',
                        last: 'Carter',
                        age: 23,
                        review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.'
                    }]
                }),
                columns: [{
                    text: 'First Name',
                    dataIndex: 'first'
                }, {
                    text: 'Last Name',
                    dataIndex: 'last'
                }, {
                    text: 'Age',
                    dataIndex: 'age'
                }, {
                    flex: 1,
                    text: 'Review',
                    dataIndex: 'review'
                }],
                dockedItems: [{
                    xtype: 'toolbar',
                    items: [{
                        text: 'Show window',
                        handler: function(btn){
                            var win = Ext.create('Ext.window.Window', {
                                width: 300,
                                height: 300,
                                x: 5,
                                y: 5,
                                title: 'State Window',
                                maximizable: true,
                                stateId: 'stateWindowExample',
                                stateful: true,
                                styleHtmlContent: true,
                                bodyPadding: 5,
                                constrain: true,
                                html: [
                                    'Between refreshes, this window will remember:',
                                    '<ul>',
                                        '<li>The width and height</li>',
                                        '<li>The x and y position</li>',
                                        '<li>The maximized and restore states</li>',
                                    '</ul>'
                                ].join(''),
                                listeners: {
                                    show: function(component) {
                                        this.update([
                                            '<ul>',
                                                '<li>getPosition(): [' + component.getPosition()[0] + ', ' + component.getPosition()[1] + ']</li>',
                                                '<li>getPosition(true): [' + component.getPosition(true)[0] + ', ' + component.getPosition(true)[1] + ']</li>',
                                            '</ul>'
                                        ].join(''));
                                    },
                                    destroy: function(){
                                        btn.enable();
                                    }
                                }
                            });
    
    
                            // Add window to owning panel, equiv to renderTo.
                            this.up('panel').add(win);
                            win.show(btn);
    
    
                            btn.disable();
                        }
                    }]
                }]
            }]
        });
    });
        </script>
    
    
    </head>
    <body>
    </body>
    </html>

    HELPFUL INFORMATION


    Screenshot or Video:
    • None.


    Debugging already done:
    • Enough to produce this report!


    Possible fix:
    • in Ext.window.window, use getPosition(true) rather than getPosition():
      Code:
          getState: function() {
              var me = this,
                  state = me.callParent() || {},
                  maximized = !!me.maximized,
                  ghostBox = me.ghostBox,
                  pos;
      
      
              
              state.maximized = maximized;
              if (maximized) {
                  pos = me.restorePos;
              } else if (ghostBox) {
                  // If we're animating a show, it will be from offscreen, so
                  // grab the position from the final box
                  pos = [ghostBox.x, ghostBox.y];
              } else {
                  pos = me.getPosition(true);
              }
              Ext.apply(state, {
                  size: maximized ? me.restoreSize : me.getSize(),
                  pos: pos
              });
              return state;
          },


    Operating System:
    • Windows 7 Professional x64
    Product Architect
    Altus Ltd.

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    905
    Vote Rating
    40
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Hmm, just tried my fix... that's not it...
    Will tinker.
    Product Architect
    Altus Ltd.

  3. #3
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    905
    Vote Rating
    40
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    It's the ghostBox position now... homing in on it.

    My override at the moment:
    Code:
    Ext.require('Ext.window.Window',
        function() {
            Ext.override(Ext.window.Window, {
                /**
                 * Fix for stateful windows position being messed up
                 * See: http://www.sencha.com/forum/showthread.php?249459-4.1.3-Stateful-window-position-is-STILL-incorrect.
                 */
                getState: function() {
                    var me = this,
                        state = me.callSuper(arguments) || {},
                        maximized = !!me.maximized,
                        ghostBox = me.ghostBox,
                        pos;
    
    
    
    
                    state.maximized = maximized;
                    if (maximized) {
                        pos = me.restorePos;
                    } else if (ghostBox) {
                        // If we're animating a show, it will be from offscreen, so
                        // grab the position from the final box
                        pos = [ghostBox.x, ghostBox.y];
    
    
                        if (window.console) {
                            window.console.log('Ghostbox pos:' + pos[0] + ', ' + pos[1]);
                        }
    
    
                    } else {
                        // <WestyFix>
                        pos = me.getPosition(true);
                        // </WestyFix>
    
    
                        if (window.console) {
                            window.console.log('Non-ghostbox pos:' + pos[0] + ', ' + pos[1]);
                        }
                    }
                    Ext.apply(state, {
                        size: maximized ? me.restoreSize : me.getSize(),
                        pos: pos
                    });
                    return state;
                }
            });
        }
    );
    Product Architect
    Altus Ltd.

  4. #4
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    905
    Vote Rating
    40
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Yeah, ghostbox position needed adjusting too.
    Suspect this should be somewhere else too, although updated AbstractComponent's toBox to local didn't help!

    This seems to work fine now:
    Code:
    Ext.require('Ext.window.Window',
        function() {
            Ext.override(Ext.window.Window, {
                /**
                 * Fix for stateful windows position being messed up
                 * See: http://www.sencha.com/forum/showthread.php?249459-4.1.3-Stateful-window-position-is-STILL-incorrect.
                 */
                getState: function() {
                    var me = this,
                        state = me.callSuper(arguments) || {},
                        maximized = !!me.maximized,
                        ghostBox = me.ghostBox,
                        pos;
    
    
    
    
                    state.maximized = maximized;
                    if (maximized) {
                        pos = me.restorePos;
                    } else if (ghostBox) {
                        // If we're animating a show, it will be from offscreen, so
                        // grab the position from the final box
                        pos = [ghostBox.x, ghostBox.y];
    
    
                        // <WestyFix>
                        var isContainedFloater = me.isContainedFloater(),
                            floatParentBox;
    
    
                        if (isContainedFloater) {
                            floatParentBox = me.floatParent.getTargetEl().getViewRegion();
                            pos[0] -= floatParentBox.left;
                            pos[1] -= floatParentBox.top;
                        }
                        // </WestyFix>
                    } else {
                        // <WestyFix>
                        pos = me.getPosition(true);
                        // </WestyFix>
    
    
                        if (window.console) {
                            window.console.log('Non-ghostbox pos:' + pos[0] + ', ' + pos[1]);
                        }
                    }
                    Ext.apply(state, {
                        size: maximized ? me.restoreSize : me.getSize(),
                        pos: pos
                    });
                    return state;
                }
            });
        }
    );
    Product Architect
    Altus Ltd.

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    22
    Vote Rating
    2
    vot is on a distinguished road

      0  

    Default Bug still exists in 4.2.2 GPL

    Bug still exists in 4.2.2 GPL


    This bug is also related to http://www.sencha.com/forum/showthre...rt-of-a-window

    Another solution to fix the problem might be

    Code:
    Ext.override(Ext.window.Window, {
    	getState: function() {
    		var me = this;
    		var state = me.callParent();
    		if (!(!!me.maximized || me.ghostBox)) {
    			Ext.apply(state, {
    				pos: me.getPosition(!!me.floatParent)
    			});
    		}
    		return state;
        }
    });
    P.S.: Maybe i'm wrong, but shouldn't do a Ext.override override the existing function in Ext.window.Window? The above solution doesn't work this way what does confuse me a little bit. Instead the origin Ext.window.Window::getState is called by the me.callParent instead of the expected Ext.panel.Panel::getState function. Because of this the obove solution simply replaces the state.pos field because everything else is done by the origin Ext.window.Window::getState. Some clarification would be really fine. Thanks.

Thread Participants: 1

Tags for this Thread