ExtJS中状态排序与store的autoLoad特性存在竞态条件问题

问题概述 #

配置了开启状态排序的网格，关联的store设置autoLoad: true后，页面刷新时会触发两次服务器请求：第一次不带排序参数，第二次带本地存储中保存的排序参数。这是因为store自动加载的时机早于网格从本地存储恢复排序状态的时机，形成竞态条件。

核心原因 #

store的autoLoad: true会在store初始化完成后立即发起请求，而网格的状态恢复（包括排序规则）是在组件渲染阶段完成的。当网格恢复排序状态后，会触发store的排序变更，进而发起第二次请求。

解决方案 #

方案一：禁用store自动加载，在网格状态恢复后手动加载 #

关闭store的autoLoad，监听网格的afterstaterestore事件，待排序状态恢复完成后再触发store加载。

store配置修改：

stores: {
    my_store: {
        model: 'App.model.MyStore',
        remoteFilter: true,
        remoteSort: true,
        session: true,
        autoLoad: false, // 关闭自动加载
    }
}

网格配置添加监听：

{
    stateful: true,
    stateId: 'my_grid_state',
    listeners: {
        afterstaterestore: function(grid) {
            const store = grid.getStore();
            // 仅当store未加载时触发，避免重复加载
            if (!store.isLoaded()) {
                store.load();
            }
        }
    }
}

方案二：提前读取状态，初始化store时设置排序规则 #

在store初始化阶段，直接从本地存储读取网格的排序状态，预先设置到store的排序器中，再开启autoLoad，确保首次请求就携带排序参数。

store配置示例：

stores: {
    my_store: {
        model: 'App.model.MyStore',
        remoteFilter: true,
        remoteSort: true,
        session: true,
        autoLoad: true,
        constructor: function(config) {
            // 读取网格保存的状态
            const gridState = Ext.state.Manager.get('my_grid_state');
            if (gridState && gridState.sort) {
                // 将排序规则注入store配置
                config.sorters = gridState.sort;
            }
            this.callParent([config]);
        }
    }
}

方案对比 #

• 方案一：完全遵循ExtJS组件生命周期，逻辑更可靠，适合大多数场景。无需手动解析状态，依赖组件事件确保时机正确。
• 方案二：保留autoLoad: true的配置，store层面自主处理排序规则，但需要确保stateId与网格完全一致，且需手动处理状态解析逻辑。

内容的提问来源于stack exchange，提问作者John Smith