Stateful grid in ExtJs 7.3 MODERN

Question

I don't get it, according to the manual for ExtJs 7.3 Modern it should be possible to configure a Ext.grid.Grid (https://docs.sencha.com/extjs/7.3.0/modern/Ext.grid.Grid.html#cfg-stateful).

I've added:

({
  //  ...
  stateId: 'state-grid', 
  stateful: true, 
  // ... 
});

and on the columns also added an stateId for each column and in the applications launch function I've added:

launch: function() {
        Ext.state.Provider.register(new Ext.state.LocalStorage());
        Ext.get(Ext.query('#appLoadingIndicator')).remove();
        this.callParent(arguments);
}

But I dont get the stateful grid to work, i.e. I hide a column and then refresh the site.. the column is still visible. So does stateful work at all in ExtJs 7.3 MODERN <--- Modern not classic.

Arthur Rubens Arthur Rubens · Accepted Answer · 2021-02-02T14:07:40

Have a look at the following self-explainable fiddle sample. It saves the width and hidden properties of the grid column:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.state.Provider.register(new Ext.state.LocalStorage());

        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                '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"
            }]
        });

        var grid = Ext.create('Ext.grid.Grid', {
            title: 'Simpsons',
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                stateId: 'name-column-state-id',
                stateful: {
                    // we will state hidden and width of the column states only
                    hidden: true,
                    width: true
                }
            }, {
                text: 'Email',
                dataIndex: 'email',
                stateId: 'email-column-state-id',
                stateful: {
                    // we will state hidden and width of the column states only
                    hidden: true,
                    width: true
                }
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                stateId: 'phone-column-state-id',
                stateful: {
                    // we will state hidden and width of the column states only
                    hidden: true,
                    width: true
                }
            }],
            store: store,
            layout: 'fit',
            fullscreen: true
        });

    }
});

Stateful grid in ExtJs 7.3 MODERN

1 Answers