Adding some persistence to dijit.TitlePane (open/close state)

Question

I want to add very simple cookies based persistence with dijit.TitlePane. I want to make sure that the state of the title pane whether it was open or closed should be preserved in a cookie so that next time the page is loaded, the title pane starts with the remembered state. This is particularly useful in situations where I have lots of title panes in a form which needs to be submitted.

Some example code would help.

Answer 1

Hey Shailesh,

you can get the state of the titlePane with dijit.byId('idOfTitle')._isShown(); and you can store it in a cookie like this dojo.cookie('idOfTitle', dijit.byId('idOfTitle')._isShown(), {expires: 30}); which will save the key-value pair for the titlePane for 30 days.

To retrieve the value you just need to call dojo.cookie('idOfTitle'); to switch between the states of the titlePane just use an if statement and dijit.byId('idOfTitle').toggle()

Answer 2

One way of doing this, is to inherit from TitlePane widget and add your own implementation to it.

dojo.require("dijit.TitlePane");
dojo.declare("dijit.MyTitlePane" , [ dijit.TitlePane ] ,                                                                                                                                                                                                                         
 {                                                                                                                                                                                                                                                                                
     postCreate : function() {                                                                                                                                                                                                                                                    
         var state = dojo.cookie(this.id);                                                                                                                                                                                                                                        
         if(state !== undefined){                                                                                                                                                                                                                                                 
             this.open = /true/.test(state);                                                                                                                                                                                                                                      
         }                                                                                                                                                                                                                                                                        
         this.inherited(arguments);                                                                                                                                                                                                                                               
     },                                                                                                                                                                                                                                                                           

     toggle : function() {                                                                                                                                                                                                                                                        
         this.inherited(arguments);                                                                                                                                                                                                                                               
         dojo.cookie(this.id, this.open , { expires : 365 });                                                                                                                                                                                                                     
     }                                                                                                                                                                                                                                                                            
 });