As posted here.

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
  • 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.define('Person', {
    extend: '',
    fields: ['first', 'last', 'review', {
        name: 'age',
        type: 'int'


    // setup the state provider, all state information will be saved to a cookie

    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',
                    '<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>',
            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:',
                                    '<li>The width and height</li>',
                                    '<li>The x and y position</li>',
                                    '<li>The maximized and restore states</li>',
                            listeners: {
                                destroy: function(){
        }, {
            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:',
                    '<li>The collapsed state</li>',
                    '<li>The width</li>',
        }, {
            region: 'center',
            stateful: true,
            stateId: 'stateGridExample',
            xtype: 'grid',
            store: Ext.create('', {
                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'
Debugging already done:
  • none
Possible fix:
  • not provided
Additional CSS used:
  • Nothing significant
Operating System:
  • Windows 7 Pro x64