In this article we will review how you can save the state of your Ext JS components on the server side. Let me give you an example so you can understand what this feature allows you to do.
Suppose that you created an Ext JS application where one of the screens renders an Ext JS grid with a set of records. You have set up this grid so the application’s users can sort, rearrange, hide or show grid columns as needed. And you want that when any user runs the app, the app remembers which columns of the grid were visible, what was the order of the columns, and how the grid was sorted the previous time the user ran the app, regardless of whether it was run on the same or a different computer or mobile device.
Having an app that remembers the state of its UI for a given user makes users feel like the app is working for them and not the other way around. This feature is particularly important in large applications with complex user interfaces. It avoids frustration and saves users time by not having to rearrange user interface components every time they go in the app.
To illustrate this feature we will create a small sample application with an Ext JS grid that displays data related to a hypothetical model cars collection. We will give the grid the ability to save the state of its columns (visible or invisible, column order and sort) to the server, as well as load this state from the server when the application is launched.