问题

I hope, someone here can help.

我希望有人可以帮助。

I have tried it the simple way, only using stateId and stateful.
But this does not save the state of the grouping.

我已尝试简单的方法，只使用stateId和stateful。
但这不会保存分组的状态。

I have also tried defining the events. "stateEvents and stateEventsByName"
But it still does not want to save the state.

我还尝试过定义事件。 "stateEvents和stateEventsByName"
但它仍然不想保存状态。

In some posts from 2011 and 2014, there was a statement about a groupingview, but I can not find it in the documentation of version 6.6.0.
https://docs.sencha.com/extjs/6.6.0/index.html

在2011年和2014年的一些帖子中，有关于groupingview的说明，但我在版本6.6.0的文档中找不到它。
https://docs.sencha.com/extjs/6.6.0/index.html

Instead I have used the feature.
https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.feature.Grouping.html

相反，我使用了这个功能。
https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.feature.Grouping.html

		me.viewBox = Ext.create('Ext.grid.Panel', {
			store: me.gridGroupingStore,
			stateId: 'textbausteingrouping',
			stateful: true,
			columns: [
				{ text: 'Name', dataIndex: 'title', flex: 1 },
				{ text: 'Gruppe', dataIndex: 'group', flex: 1, hidden:true }
			],
			features: [{
				ftype:'grouping',
				groupHeaderTpl: '{name}',
			}]
		});

		me.viewBox = Ext.create('Ext.grid.Panel', {
			store: me.gridGroupingStore,
			stateId: 'textbausteingrouping',
			stateful: true,
			columns: [
				{ text: 'Name', dataIndex: 'title', flex: 1 },
				{ text: 'Gruppe', dataIndex: 'group', flex: 1, hidden:true }
			],
			features: [{
				ftype:'grouping',
				groupHeaderTpl: '{name}',
			}]
		});

Does anyone know, how to make the grouping stateful?
I want the groups staying collapsed, if a user collapsed them.
As an interim solution I currently use the option "startCollapsed".

有人知道如何使分组成为有状态的吗？
我希望组在用户折叠它们后保持折叠状态。
作为临时解决方案，我目前使用"startCollapsed"选项。

Thank you in advance and have a nice day.

提前谢谢你，祝你有个愉快的一天。

		me.viewBox = Ext.create('Ext.grid.Panel', {
			store: me.gridGroupingStore,
			stateId: 'textbausteingrouping',
			stateful: true,
			columns: [
				{ text: 'Name', dataIndex: 'title', flex: 1 },
				{ text: 'Gruppe', dataIndex: 'group', flex: 1, hidden:true }
			],
			features: [{
				ftype:'grouping',
				groupHeaderTpl: '{name}',
			}]
		});

答案1

得分: 0

I believe you cannot find what you are searching for out of the box.
你可能无法直接找到你要的内容。

You could save the collapsed state of the row and on future loads, expand the rows that match your saved state.
你可以保存行的折叠状态，并在将来加载时展开与保存状态匹配的行。

Here is an override we implemented to achieve something slightly similar: Preserve expanded nodes and selected item for a Tree between store loads.
以下是我们实现的一个覆盖方法，以在存储加载之间保留树的展开节点和选定项。

// --> The following override is used to keep state and selection
// the override works only if at least one of the below configuration are defined and set on true on the TreeStore
// --> 以下覆盖用于保持状态和选择
// 仅当以下配置中至少有一个被定义并在TreeStore上设置为true时，覆盖才会起作用

Ext.define('Overrides.data.TreeStore', {
override: 'Ext.data.TreeStore',

initConfig: function () {
    this.callParent(arguments);
    this.on('beforeload', function () {
        var thisTreePanel = this.ownerTree;
        if (!Ext.isEmpty(thisTreePanel)) {
            //save current selection
            if (this.keepCurrentSelection) {
                if (!Ext.isEmpty(this.ownerTree.getSelection()[0])) {
                    this.ownerTreeCurrentSelection = this.ownerTree.getSelection()[0].getPath()
                }
            }
            //save state
            if (this.keepExpandedState) {
                this.state = this.getCurrentState();
            }
        }
    });
    this.on('load', function () {
        if (this.keepExpandedState) {
            this.restorePreviousState(this.state);
        }

        if (this.keepCurrentSelection) {
            if (!Ext.isEmpty(this.ownerTreeCurrentSelection)) {
                this.ownerTree.selectPath(this.ownerTreeCurrentSelection);
            }
        }
    })
},

//store state of tree
getCurrentState: function () {
    var nodes = [];
    var rootNode = this.ownerTree.getRootNode();
    if (!Ext.isEmpty(rootNode)) {
        rootNode.eachChild(function (child) {
            var storeTreeState = function (node, expandedNodes) {
                if (node.isExpanded() && node.childNodes.length > 0) {
                    expandedNodes.push(node.getPath());
                    node.eachChild(function (child) {
                        storeTreeState(child, expandedNodes);
                    });
                }
            };
            storeTreeState(child, nodes);
        })
    }
    return {
        expandedNodes: nodes
    }
},

//set previous tree state (state before reload)
restorePreviousState: function (state) {
    if (!Ext.isEmpty(state)) {
        var nodes = state.expandedNodes;
        if (!Ext.isEmpty(nodes)) {
            for (var i = 0; i < nodes.length; i++) {
                if (typeof nodes[i] != 'undefined') {
                    this.ownerTree.expandPath(nodes[i]);
                }
            }
        }
    }
}

});

// --> The following override is used to keep state and selection
// the override works only if at least one of the below configuration are defined and set on true on the TreeStore

// keepExpandedState: true
// keepCurrentSelection: true

Ext.define('Overrides.data.TreeStore', {
	override: 'Ext.data.TreeStore',

	initConfig: function () {
		this.callParent(arguments);
		this.on('beforeload', function () {
			var thisTreePanel = this.ownerTree;
			if (!Ext.isEmpty(thisTreePanel)) {
				//save current selection
				if (this.keepCurrentSelection) {
					if (!Ext.isEmpty(this.ownerTree.getSelection()[0])) {
						this.ownerTreeCurrentSelection = this.ownerTree.getSelection()[0].getPath()
					}
				}
				//save state
				if (this.keepExpandedState) {
					this.state = this.getCurrentState();
				}
			}
		});
		this.on('load', function () {
			if (this.keepExpandedState) {
				this.restorePreviousState(this.state);
			}

			if (this.keepCurrentSelection) {
				if (!Ext.isEmpty(this.ownerTreeCurrentSelection)) {
					this.ownerTree.selectPath(this.ownerTreeCurrentSelection);
				}
			}
		})
	},

	//store state of tree
	getCurrentState: function () {
		var nodes = [];
		var rootNode = this.ownerTree.getRootNode();
		if (!Ext.isEmpty(rootNode)) {
			rootNode.eachChild(function (child) {
				var storeTreeState = function (node, expandedNodes) {
					if (node.isExpanded() && node.childNodes.length > 0) {
						expandedNodes.push(node.getPath());
						node.eachChild(function (child) {
							storeTreeState(child, expandedNodes);
						});
					}
				};
				storeTreeState(child, nodes);
			})
		}
		return {
			expandedNodes: nodes
		}

	},

	//set previous tree state (state before reload)
	restorePreviousState: function (state) {
		if (!Ext.isEmpty(state)) {
			var nodes = state.expandedNodes;
			if (!Ext.isEmpty(nodes)) {
				for (var i = 0; i < nodes.length; i++) {
					if (typeof nodes[i] != 'undefined') {
						this.ownerTree.expandPath(nodes[i]);
					}
				}
			}
		}
	}
});