Ext JS 4 Grid State Management

ExtJS enables you allow your users to reorder grid columns using drag & drop. By combining this feature with Ext JS state management, you can let users customize the look of grids and preserve those settings on a going-forward basis. However, users occasionally make mistakes, so it’s helpful to also give them the option to restore the grid columns back to their initial defaults as illustrated by the following code snippet:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        // tooltips are good!
        Ext.QuickTips.init();

        // turn on state management - store state in cookies
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

        var store = Ext.create('Ext.data.Store', {
            fields: ['first', 'last'],
            data: [{
                first: 'Steve',
                last: 'Drucker'
            }, {
                first: 'Dave',
                last: 'Gallerizzo'
            }, {
                first: 'Jason',
                last: 'Perry'
            }]
        });


        Ext.widget('grid', {

            renderTo: Ext.getBody(),
            store: store,
            title: 'Names',
            stateful: true,          // turn on state management for the grid 
            stateId: 'gridexample',  // give the grid instance a unique state id
            width: 300,
            height: 200,
            columns: [{
                text: 'First',
                dataIndex: 'first',
                flex: 1
            }, {
                text: 'Last',
                dataIndex: 'last',
                flex: 1
            }],
            tools: [{
                type: 'gear',
                tooltip: 'Reset Grid Layout',
                handler: function(event, toolEl, owner, tool) {
                    Ext.Msg.confirm('Reset Grid Layout', 'Are you sure that you want to reset the grid layout?',

                    function(response) {
                        if (response == 'yes') {
                            var grid = tool.up('grid');

                            // clear the state management for the grid
                            Ext.state.Manager.clear(grid.stateId);
                            
                            // repaint the grid using the hardcoded defaults
                            grid.reconfigure(grid.getStore(), grid.initialConfig.columns);
                        }
                    });
                }
            }

            ]

        });

    }
});

Run the example at https://fiddle.sencha.com/#fiddle/3kq

Happy coding!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s