Stateful grid in ExtJs 7.3 MODERN - extjs

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.

Answer 1

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": "lisa#simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart#simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home#simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge#simpsons.com",
"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
});
}
});