Saving component state in LocalStorage in Sencha Architect

Sencha 4

Create a function init under Application and add the below code to initialze a state provider to store states of different components
in the browser's local storage.

// initialize state provided for saving component states
Ext.state.Manager.setProvider(Ext.create('Ext.state.LocalStorageProvider'));



Add the below two configs to the component you want to save the state for.
{
  stateful: true,
  stateId: "statefulComponentId" // "any meaningful name"+"id" for the component, e.g. searchResultsGridId
}

Known issue (until extjs 6.0):
Adding state to a grid panel which is using a buffered store (usually used to create infintely scrollable grid) breaks the working 
of store.

// intentionally overriding applyState due to a bug in which does not allow autoLoad false with stateful grids. Now compromising with not saving sort field and direction
// for the grid state
// Bug details here --> https://www.sencha.com/forum/showthread.php?306350-BufferedStore-autoLoads-even-if-autoLoad-is-set-to-false

var me = this,
            stateSorters = state.sorters,
            stateFilters = state.filters,
            stateGrouper = state.grouper;
        if (stateSorters) {
            // don't apply the sorters state to prevent the auto load of this buffered store
            // me.getSorters().replaceAll(stateSorters); <-- this is the only changed line
        }
        if (stateFilters) {
            // We found persisted filters so let's save stateful filters from this point forward.
            me.saveStatefulFilters = true;
            me.getFilters().replaceAll(stateFilters);
        }
        if (stateGrouper) {
            me.setGrouper(stateGrouper);
        }