Results 1 to 7 of 7

Thread: How to make checkbox stateful (should be simple)

  1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    365

    Default How to make checkbox stateful (should be simple)

    Hello! I want to save the state of a checkbox (wether it's checked or not).

    I got this far:
    Code:
    Ext.onReady(function()
    {	
    	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
    	this.MyBox = new Ext.form.Checkbox(
    		{	id: 'MyUniqueBoxId',
    			boxLabel: 'My checkbox',
    			stateful: true,
    			stateEvents: ['click', 'change', 'check', 'hide', 'show']
    		});
    ...
    The Box is used as an additional item in a PagingToolbar. I do:
    - load the page
    - check the box
    - reload the page -> the box is unchecked

    Shouldn't it still be checked? What could be the problem? Did I miss something?

  2. #2
    Sencha User
    Join Date
    Apr 2008
    Posts
    365

    Default

    Hu, nobody? Didn't thought it would be such a problem...

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Use:

    Code:
    stateful: true,
    stateEvents: ['check'],
    getState: function() {
    	return {checked: this.getValue()}
    },
    applyState: function(state) {
    	this.setValue(state.checked);
    }
    (but you'll first need this bugfix)

  4. #4
    Sencha Premium User NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    538

    Default

    That bit of code should be put in the API docs as an example
    Noah
    Front-End Developer
    Norfolk Southern

  5. #5

    Default

    The fix posted by Condor is still valid for ExtJS 4.2.

  6. #6
    Sencha Premium Member
    Join Date
    Jan 2014
    Posts
    14

    Default

    For Ext4 the event name in Condor's example should be 'change', not 'check'
    Last edited by reedcat; 28 Jan 2014 at 8:20 AM. Reason: clarification

  7. #7

    Default

    If you use Sencha Architect and you marked a view as your initial view, an invisible line is automatically added on top of your Application launch function, a line looking like Ext.create('YourApp.view.MainPanel');

    You can see that hidden line when you click on the Application object in Sencha Architect Project Inspector.


    In that case unfortunately, if you initialize the state provider in your Application launch function, your fields applyState functions will never get called, because your view is instantiated BEFORE the state provider.

    Solution : copy the Ext.create line, unmark the view as the initial view, and add the copied line AFTER your state provider is initialized.

    Example:

    Before, with a view marked as your initial view (stateful fields do not work):

    Code:
        launch: function() {
            Ext.create('YourApp.view.MainPanel'); // this line was added automatically by Sencha Architect
            
            if( Ext.supports.LocalStorage ) {
                Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());
            } else {
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            }
        }
    After, unmarked the view as the initial view (stateful fields now work!) :

    Code:
        launch: function() {       
            if( Ext.supports.LocalStorage ) {
                Ext.state.Manager.setProvider(new Ext.state.LocalStorageProvider());
            } else {
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
            }
    
            Ext.create('YourApp.view.MainPanel');
    
        }
    Hope this can save some headache!

Posting Permissions

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