[4.1.3] Stateful window position is STILL incorrect.

**westy** · 19 Nov 2012 8:41 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.3

Browser versions tested against:

Firefox 16

DOCTYPE tested against:

html

Description:

Following on from my bug here: http://www.sencha.com/forum/showthread.php?242377
It's not quite fixed, since if window is added to a container (in a manner to which renderTo used to be used), the position is incorrect.

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

**westy** · 19 Nov 2012 8:48 AM

Hmm, just tried my fix... that's not it...
Will tinker.

**westy** · 19 Nov 2012 9:13 AM

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;
            }
        });
    }
);

**westy** · 19 Nov 2012 9:37 AM

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;
            }
        });
    }
);

[4.1.3] Stateful window position is STILL incorrect.

Thread Tools

Search Thread

Display

[4.1.3] Stateful window position is STILL incorrect.

[4.1.3] Stateful window position is STILL incorrect.

Tags for this Thread