Extjs 4.2 grid's state does not restore in Ext.window.Window view

Question

I use ExtJS version is 4.2. I'm trying to save the state of a grid, which is item of a window. When I close the window, state of the grid is saved in cookies, but it doesn't get restored when window is opened again. What did I miss?

This is my code:

Ext.onReady(function () {
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "[email protected]",
                "phone": "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    Ext.create('Ext.container.Viewport', {
        items: [
            Ext.create('Ext.Button', {
                text: 'Click me',
                listeners: {
                    'click': function () {
                        var grid = Ext.create('Ext.grid.Panel', {
                            title: 'Simpsons',
                            store: Ext.data.StoreManager.lookup('simpsonsStore'),
                            columns: [{
                                text: 'Name',
                                dataIndex: 'name'
                            }, {
                                text: 'Email',
                                dataIndex: 'email',
                                flex: 1
                            }, {
                                text: 'Phone',
                                dataIndex: 'phone'
                            }],

                            stateful: true,
                            stateId: 'some_state_id'
                        });

                        var win = Ext.create('Ext.window.Window', {
                            title: 'Hello',
                            height: 200,
                            width: 900,
                            layout: 'fit',
                            items: grid
                        });

                        win.show();
                    }
                }
            })
        ]
    });
})

Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/20sf

Answer 1

On every button click you create a new window with entirely new grid which just seems the same but for the state manager is absolutely another grid. You may check that by logging grid component through the ComponentManager and seeing a different grid id each time you click the button:

console.log(Ext.ComponentQuery.query('grid'));

To solve your problem I would recommend you to:

1. pull off the grid and window creation phase outside the button click
2. change window on close behaviour from destroy to hide by setting closeAction parameter to 'hide'
3. make your window component modal to prevent a user from another button click until the window is closed.

You may find corrected fiddle here and code below:

Ext.onReady(function () {
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    var store = Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "[email protected]",
                "phone": "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],

        stateful: true,
        stateId: 'some_state_id'
    });

    var win = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        modal: true,
        layout: 'fit',
        closeAction: 'hide',
        items: grid
    });

    Ext.create('Ext.container.Viewport', {
        items: [
            Ext.create('Ext.Button', {
                text: 'Click me',
                listeners: {
                    'click': function () {
                        // console.log(Ext.ComponentQuery.query('grid'));
                        win.show();
                    }
                }
            })
        ]
    });
})