PDA

View Full Version : FieldSet and stateful/stateId



RollingFred
8 Sep 2010, 8:07 AM
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
8 Sep 2010, 9:42 AM
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
8 Sep 2010, 11:54 AM
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
8 Sep 2010, 12:15 PM
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
8 Sep 2010, 12:39 PM
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
9 Sep 2010, 5:43 AM
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);
}
});
}
});