[4.1.1 & 4.1.2 GA] Stateful window shown with animation save pos as [-10000, -10000]

[westy]

As posted here.


REQUIRED INFORMATION
Ext version tested:

• Ext 4.1.1
• 4.1.2 GA

Browser versions tested against:

• Firefox
• Chrome
• Safari

DOCTYPE tested against:

• Just html I think

Description:

• Non-modal, stateful windows do not save the correct state when shown animating from another component.

Steps to reproduce the problem:

• Start with empty state, so cleared local storage or cookie, whatever you use.
• Open a non-modal stateful window, ensuring you animate the window from the clicked on button.
• Close the window, and open again.
• The window does not appear, and there are no errors logged to the console.
• If turn on contrainHeader can resize the viewport to get the window to appear at [0, 0].

Turning off the statefulness of the window solves the issue, as does turning off the animation.Modal windows do not appear to exhibit the issue, although it might be that none of mine are statefulm I forgot to check.

The result that was expected:

• Window opens are normal

The result that occurs instead:

• Window not on screen

Test Case:

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(''),
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Show window',
                    handler: function(btn){
                        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,
                            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: {
                                destroy: function(){
                                    btn.enable();
                                }
                            }
                        }).show(btn);
                        btn.disable();
                    }
                }]
            }]
        }, {
            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'
            }]
        }]
    });
});

HELPFUL INFORMATION
Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• Nothing significant

Operating System:

• Windows 7 Pro x64

[dongryphon]

And tracked now Thanks!

[westy]

Not fixed, see here!