如何让带Grouping功能的ExtJS Grid记住分组状态？

要实现Grouping特性的折叠状态持久化，需从Grid状态事件配置、Grouping Feature状态逻辑改造两方面入手，具体方案如下：

1. 配置Grid的状态监听事件 #

让Grid监听分组展开/折叠事件，确保状态变更时触发保存逻辑：

stateEvents: ['groupcollapse', 'groupexpand']

2. 改造Grouping Feature的状态处理逻辑 #

Grouping Feature默认不支持折叠状态持久化，需开启其stateful属性，并通过重写getState和applyState方法实现状态的保存与恢复：

features: [{
    ftype:'grouping',
    groupHeaderTpl: '{name}',
    stateId: 'textbausteingrouping-grouping-feature', // 给Feature单独设置状态ID
    stateful: true, // 开启Feature状态持久化
    // 收集当前折叠的分组信息，存入状态
    getState: function() {
        var collapsedGroups = [];
        this.view.eachNode(function(node) {
            var group = node.getGroup();
            if (group && group.collapsed) {
                collapsedGroups.push(group.getGroupName());
            }
        });
        return { collapsedGroups: collapsedGroups };
    },
    // 恢复保存的折叠状态
    applyState: function(state) {
        if (!state?.collapsedGroups) return;
        
        var me = this;
        // 确保Store加载完成后再恢复（分组依赖Store数据）
        if (!me.store.isLoaded()) {
            me.store.on('load', function() {
                me.restoreCollapsedGroups(state.collapsedGroups);
            }, me, { single: true });
        } else {
            me.restoreCollapsedGroups(state.collapsedGroups);
        }
    },
    // 辅助方法：批量折叠指定分组
    restoreCollapsedGroups: function(collapsedNames) {
        collapsedNames.forEach(function(groupName) {
            var group = this.view.getGroup(groupName);
            if (group && !group.collapsed) {
                this.collapse(groupName);
            }
        }, this);
    }
}]

3. 确保全局状态管理器配置正常 #

ExtJS状态持久化依赖Ext.state.Manager，默认使用CookieProvider，可在应用启动时显式配置（可选，确保状态存储生效）：

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000) // 状态保存30天
}));

完整代码示例 #

// 全局状态管理器配置（可放在app.js初始化时）
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)
}));

me.viewBox = Ext.create('Ext.grid.Panel', {
    store: me.gridGroupingStore,
    stateId: 'textbausteingrouping',
    stateful: true,
    stateEvents: ['groupcollapse', 'groupexpand'], // 监听分组状态变更事件
    columns: [
        { text: 'Name', dataIndex: 'title', flex: 1 },
        { text: 'Gruppe', dataIndex: 'group', flex: 1, hidden:true }
    ],
    features: [{
        ftype:'grouping',
        groupHeaderTpl: '{name}',
        stateId: 'textbausteingrouping-grouping-feature',
        stateful: true,
        getState: function() {
            var collapsedGroups = [];
            this.view.eachNode(function(node) {
                var group = node.getGroup();
                if (group && group.collapsed) {
                    collapsedGroups.push(group.getGroupName());
                }
            });
            return { collapsedGroups: collapsedGroups };
        },
        applyState: function(state) {
            if (!state?.collapsedGroups) return;
            
            var me = this;
            if (!me.store.isLoaded()) {
                me.store.on('load', function() {
                    me.restoreCollapsedGroups(state.collapsedGroups);
                }, me, { single: true });
            } else {
                me.restoreCollapsedGroups(state.collapsedGroups);
            }
        },
        restoreCollapsedGroups: function(collapsedNames) {
            collapsedNames.forEach(function(groupName) {
                var group = this.view.getGroup(groupName);
                if (group && !group.collapsed) {
                    this.collapse(groupName);
                }
            }, this);
        }
    }]
});

配置完成后，用户折叠的分组状态会被保存到Cookie（或自定义状态存储）中，下次打开页面时将自动恢复之前的折叠状态。

内容的提问来源于stack exchange，提问作者Orgoth Dorngree