State provider does not restore sorters properly

Question

I'm trying to store my grid state using the Ext.state.CookieProvider. The problem is I can't restore sorters parameters while state itself (width, order) is restoring properly.

First I've created cookieprovider in init() method of the viewport viewcontroller:

Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider', {}));

My store is set to auto load with remote sorting:

Ext.define('MyApp.requests.store.QueryRequestsGridStore', {
    extend: 'Ext.data.Store',
    model: 'MyApp.requests.model.QueryRequestsGridModel',
    alias: 'store.queryRequestsGrid',
   remoteSort: true,
    autoLoad: true,
    proxy: {
        startParam: 'offset',
        limitParam: 'limit',
        url: '/requests',
        noCache: false,
        type: 'ajax',
        reader: {
            type: 'json',
            rootProperty: 'data',
            totalProperty: 'total'
        }
    },
});

Store is defined in grid using viewmodel binds:

bind: {
    store: '{queryRequestsGrid}'
},

I'm loading the grid containing store from the viewport viewcontroller on button click like this:

var panelToAddName = Ext.create('MyApp.requests.view.QueryRequestsGridView', {});
var mainViewPort = Ext.ComponentQuery.query('#mainViewPort')[0];
var regionPanel = mainViewPort.down('[region=center][xtype=panel]');
regionPanel.removeAll();
regionPanel.add(panel);

Cookie contains sorters, but grid is loaded without any sort parameters.

"storeState":{"sorters":[{"root":"data","property":"date_completed","direction":"ASC"}]}}}

I've dug into the ext-all-debug.js source file and found initState() method of a 'Ext.state.Stateful' class.

initState: function() {
        var me = this,
            id = me.stateful && me.getStateId(),
            hasListeners = me.hasListeners,
            state, combinedState, i, len, plugins, plugin, pluginType;
        if (id) {
            combinedState = Ext.state.Manager.get(id);
            if (combinedState) {
                state = Ext.apply({}, combinedState);
                if (!hasListeners.beforestaterestore || me.fireEvent('beforestaterestore', me, combinedState) !== false) {

                    plugins = me.getPlugins() || [];
                    for (i = 0 , len = plugins.length; i < len; i++) {
                        plugin = plugins[i];
                        if (plugin) {
                            pluginType = plugin.ptype;
                            if (plugin.applyState) {
                                plugin.applyState(state[pluginType], combinedState);
                            }
                            delete state[pluginType];
                        }
                    }

                    me.applyState(state);
                    if (hasListeners.staterestore) {
                        me.fireEvent('staterestore', me, combinedState);
                    }
                }
            }
        }
    },

If to log me.store from inside of this method, the store is shown in console as ext-empty-store while me is my loaded grid. Seems like state is applying before the store is properly loaded.

If to reuse the initState method inside beforerender grid event, sorters are restoring from cookie properly.

Any suggestions?

Answer 1

I have not worked with viewmodel binds as the sole bind between store and grid, and can't comment on whether that is supposed to work at all, or just by accident.

But I know that the viewmodel is processed very late, because the view has to be fully initialized first (including applyState), so the viewmodel can find all the components it wants to bind the listeners to.

So please try to add the store using any of the two "old-school" methods that work even without the viewmodel: store:'MyStoreId' or store:Ext.create('MyApp.store.MyStore') on the grid. That way, the store should be bound to the grid before applyState.

Furthermore, I see another issue you should address: Your store loads directly after store init. (autoLoad:true). At that time, it is not yet bound to the grid; thus, no sort/filter has been applied, which means that with remoteSort/remoteFilter enabled, you are sending too many requests to the server. I would recommend to load the store only after it has been applied to the grid (in grid.initComponent after the callParent call, or from grid.boxready listener). If you really want to use autoLoad, I'd recommend to look into setAutoLoad method