Grids in Extjs provide a lot of functionality out of the box, like hiding columns, applying sorters/filters, re-sizing column width etc. So it is very desirable by the end users to be able to save the state of grid so that they don’t have to apply those settings to grid each time the grid is rendered.
Extjs provides a very easy and clean way to setup all its components to save their state to browser’s localStorage or in the form of cookies through its Ext.state.LocalStorageProvider and Ext.state.CookieProvider respectively. In this example we’ll explore how to setup any component to save its state to localStorage. The configuration basically requires two steps :
- Configuring a state provider
- Configuring component to save its state
Configuring a state provider
This can be done in the init method of the application where we can initialize the state provider
Configuring component to save its state
We need to mark each component (that needs to be stateful) as stateful and provide it a stateId for state manager to save that component’s state
That’s it! Now the state of the component should be saved in the browser’s local storage. You can verify this by checking the local storage in dev tools or just try hiding some columns in a stateful grid and reload app to check if the grid remembers your settings.