Race Condition Between Stateful Sorting and autoLoad Feature in ExtJS

Question

I am experiencing a problem with ExtJS where there is a race condition between the stateful sorting feature and the autoLoad: true configuration of a store, resulting in two server requests instead of one.

Issue Details:

Scenario: I have a grid configured with a store that has autoLoad: true and stateful sorting enabled.

When the grid is rendered, the sorting state is applied from local storage.

The store automatically loads data due to autoLoad: true.

Problem: The store’s initial load does not respect the sorting state stored in local storage.

As a result, the store sends an initial request without sorting parameters, followed immediately by another request with the sorting parameters.

This results in two server requests being made, one without sorting and one with sorting.

The store configuration in the view model:

stores: {
    my_store: {
        model: 'App.model.MyStore',
        remoteFilter: true,
        remoteSort: true,
        session: true,
        autoLoad: true,
    }
}

Grid config:

{
...
stateful: true,
stateId: 'my_grid_state',
}

Expected Behavior:

The grid should correctly apply the sorting state from local storage on the first load without causing a second request to the server.

There should be no race condition leading to redundant server requests.

Reproduction Steps:

Configure a Grid with Stateful Sorting: Set up a grid with a store that has autoLoad: true and stateful sorting enabled.

Sort a Column: Go to the grid and sort any column. The sorting state will be saved in local storage.

Reload the App: Refresh or reload the application.

Observe the Behavior: After the reload, notice that the grid makes two server requests: The first request does not include the sorting parameters. The second request includes the sorting parameters.

Arthur · Accepted Answer · 2024-09-05 10:47:21Z

0

It seems that you will have to set autoLoad: false and add a listener and applyState method instead, like:

{ //grid config
    listeners: {
       afterrender: function (grid) {
           grid.store.load();
       }
    },
    
    applyState: function(state) {
        this.callParent(arguments);

        //apply state
        if (state && state.sort) {
           this.store.sort(state.sort);
        }
    }
     //...
}

In this way there should only be one request to the server.

answered Sep 5, 2024 at 10:47

Arthur

4383 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Race Condition Between Stateful Sorting and autoLoad Feature in ExtJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related