FieldSet and stateful/stateId

[RollingFred]

Not sure if I should put that here or in another forum, but I'm working with Designer so...:

I have a form composed of multiple FieldSets. All of them are collapsible.

I set all of them to stateful, with stateId and Id set as well. First line of my onReady is:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

What I expect to happen is for the FieldSets to "remember" if they were opened or closed last time a user went on that Form (like the grid column sizes/ordering).
But each time I reopen the form, the Fieldsets are coming back opened (all of them).

Ideas? Thanks in advance.

[jarrednicholls]

Hi RollingFred,

Try adding to stateEvents ['collapse', 'expand'], which should trigger the state of the FieldSets to save when they are collapsed or expanded. That should take care of it.

[RollingFred]

Thanks for the hint.
I tried on my big Form and it didn't work. I'll do more testing on a smaller one and let you know.

[RollingFred]

Got it working.
In addition to stateEvents set to ['collapse', 'expand'], I had to add getState and applyState to the FieldSet:

Ext.apply(searchForm.fsDateFields, {
		getState: function() {
			return{collapsed: this.collapsed};
		},
	    applyState: function(state) {
		    if (state.collapsed)
			    this.collapse(true);
		    else
			    this.expand(true);
		}
	});

I know I saw somewhere that you were working on it, but to re-iterate: It would be nice to define your own components and add them to the toolbox, so i could have a fully stateful Fieldset to be used instead of the standard one.

Thanks again for the help!

[jarrednicholls]

RollingFred,

Indeed, I did forget to mention that. My apologies. Very glad to see you got it working though, great work! You can turn that single Ext.apply into a more generic function that iterates through and applies the functions to all Ext.Panels (since collapse and expand is a native Panel operation) or specifically FieldSets within a particular parent Container.

UX integration has been expressed many times as a feature that is coming. It is not a simple feature however, and requires development work (of a plugin against a plugin API) in order to integrate custom components into the Designer. But it is important and we know it's important and it's not been forgotten, it is on the way.

[RollingFred]

Posting the code as reference where iterating through all the fieldsets of a Form. This assumes all the fieldsets are autoref with correct ids:

Ext.iterate(mySearchForm, function(key, value) {
		if (value.xtype == "fieldset")
		{
			Ext.apply(value, {
				getState: function() {
					return{collapsed: this.collapsed};
				},
			    applyState: function(state) {
				    if (state.collapsed)
					    this.collapse(true);
				    else
					    this.expand(true);
				}
			});
		}
    });

[Nux]

Not sure about older versions, but in ExtJS 6 you can use `defaults` to setup required function.

Ext.define('Myapp.view.SomeFormFieldsets', {
    extend: 'Ext.container.Container',
    defaults: {
        xtype: 'fieldset',
        collapsible: true,
        stateful: {collapsed:true},
        // defining this function is required because default state restore doesn't correctly setup fieldset collapsing
        // see: https://www.sencha.com/forum/showthread.php?109225-FieldSet-and-stateful-stateId
        applyState: function(state) {
            if (state.collapsed) {
                this.collapse(true);
            } else {
                this.expand(true);
            }
        }
    },
    items: [
        {
            title: 'Some fieldset title',
            stateId: 'SomeForm-SomeFieldset',
            items: [
                // ...
            ]
        }
        {
            title: 'Other fieldset',
            stateId: 'SomeForm-OtherFieldset',
            items: [
                // ...
            ]
        }
    ]
});