Results 1 to 7 of 7

Thread: FieldSet and stateful/stateId

  1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    14
    Vote Rating
    0
      0  

    Default FieldSet and stateful/stateId

    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.

  2. #2
    Sencha User jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
      0  

    Default

    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.

  3. #3
    Ext User
    Join Date
    Sep 2010
    Posts
    14
    Vote Rating
    0
      0  

    Default

    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.

  4. #4
    Ext User
    Join Date
    Sep 2010
    Posts
    14
    Vote Rating
    0
      0  

    Default

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

    Code:
    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!

  5. #5
    Sencha User jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
      0  

    Default

    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.

  6. #6
    Ext User
    Join Date
    Sep 2010
    Posts
    14
    Vote Rating
    0
      0  

    Default

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

    Code:
    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);
    				}
    			});
    		}
        });

  7. #7
    Sencha Premium User Nux's Avatar
    Join Date
    Feb 2016
    Location
    3city, Poland
    Posts
    31
    Vote Rating
    2
      0  

    Default

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

    PHP Code:
    Ext.define('Myapp.view.SomeFormFieldsets', {
        
    extend'Ext.container.Container',
        
    defaults: {
            
    xtype'fieldset',
            
    collapsibletrue,
            
    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: [
                    
    // ...
                
    ]
            }
        ]
    }); 

Similar Threads

  1. Stateful TreePanel
    By roger.bowman in forum Community Discussion
    Replies: 9
    Last Post: 26 Jan 2013, 3:57 PM
  2. GridPanel Stateful behavior with many unique "StateID"s
    By MCataldo in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 May 2010, 10:17 AM
  3. stateful
    By mnask79 in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 29 Nov 2008, 8:30 AM
  4. Stateful on grid
    By Choleriker in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 14 Apr 2008, 6:03 AM
  5. Stateful Grids
    By bchic869 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 2 Feb 2007, 11:44 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •