Sencha ExtJs 7 Modern Grid Stateful PlugIn

About the Author

César Zea
Senior Software Engineer
SQL Server expert: 25 y.e.
Sencha ExtJS: 11 y.e.
Java J2EE: 10 y.e.
AWS API. AWS-DMS

It is not uncommon for users to want to see the data grid as they left it the last time they used it. For this, Sencha supposedly implements the "stateful" functions, nor I, not those to whom I have asked with , have not been able to find how to use these functions in the grids, even more so with the Modern version .

I have developed the plugin that I am discussing here with you to store the order of the columns, the visibility and the width, although it can be expanded to save any other attribute.

The state is saved in the browser's LocalStorage, which should be taken into account if you want different users to maintain different settings for their grids. This will be seen as it can be done later.

In the event that you want any modification that you need, such as implementing the necessary functionalities so that the configuration is stored on the server, do not hesitate to contact me.

There are some bugs in Sencha 7 that make the plugin not work correctly in Safari, although these errors are resolved in the ExtJs Modern 7.4 version.

Automatic and non-automatic mode

This plugin performs its task in two ways: auto save and non-auto save.

In automatic mode the plugin saves the grid configuration each time a change is made to the configuration of its columns, while in non-automatic mode the configuration will only be saved when the user presses a button to perform the save action.

Avoiding support requests from users

It is necessary to bear in mind that if a user changes the configuration of the grid columns and even if he reloads the page or exits and re-enters, he will see the column configuration as he left them, it will be necessary to offer him some mechanism to return to the initial default configuration or it will end up giving us support problems.

Getting started

Let's start with the simplest default option: non-auto save mode.

You have to take in mind that the stateId is used to identify the grid status in the LocalStorage. Thus, for the same domain, you have to use different statusId for each grid.

Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',

    border: true,
    layout: 'fit',
    flex: 1,

    store: this.simpsonsSt,

    stateId: 'simpsons',
    plugins: {
        statefulgridext: {
            stateId: 'simpsons'
        }
    },

    columns: columns
});

And the auto save mode.

Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',

    border: true,
    layout: 'fit',
    flex: 1,

    store: this.simpsonsSt,

    stateId: 'simpsons',
    plugins: {
        statefulgridext: {
            stateId: 'simpsons',
            autoSave: true
        }
    },

    columns: columns
});

Reconfiguring the columns at run time

There are a lot of times that we need reconfigure the grid columns at runtime. I am implemented the functionality to do that in the plugin, that can be used as next:

setEmployees: function () {

        let plug = this.grid.getPlugin("statefulgridext");
        let stateId = 'employee';

        if (!plug.startReconfigure(stateId)) {

            let columns = [{
                flex: 1,
                text: 'Name',
                dataIndex: 'name'
            }, {
                flex: 1,
                text: 'Seniority',
                align: 'center',
                dataIndex: 'seniority'
            }, {
                flex: 1,
                text: 'Department',
                dataIndex: 'department'
            }];
            this.grid.setColumns(columns);
        }

        plug.endReconfigure(stateId);

        this.grid.setStore(this.employeeSt);
        this.grid.setTitle("Employee");

    }

Downloading the code

You can download the code from any of the fiddles linked in that page.

Please, write you comments or questions bellow.