Saving User Interface Settings with the Help of Ext.state.Manager

It is good to take care of your Users and save their interface settings. There are several ways of implementing this feature, let’s have a look at one of them.

Storing table states in a browser with the help of LocalStorage.

ExtJs library already contains all the necessary tools, we just have to make use of those.

To begin with, define the state storage. Edit the /js/app/system/Application.js file responsible for admin interface initialization.

Add the string at the top of the file:

Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());

Now that we are done with the preparations, all that is left to do is to enable the support in the interface. Open any Layout Designer project containing a table, or create a new module as described in the Links to Objects and Lists of Objects in DVelum 0.9.x – as Simple as That case study, which we are using here as well.

Open table properties and set the following values:

  • stateEvents: ['columnmove', 'columnresize', 'sortchange', 'resize', 'show', 'hide'] - list of events, which involve saving the interface;
  • stateful: true - checkbox stating that we are going to save changes;
  • stateId:’myGrid’ - any unique id used as a key for storing the data.

Save the project.

Go to the module interface.

Swap the columns, some of them can be hidden or resized.

Refresh the page.

The settings have been saved.