How to make checkbox stateful (should be simple)

[wuschba]

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

I got this far:

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?

[wuschba]

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

[Condor]

Use:

stateful: true,
stateEvents: ['check'],
getState: function() {
	return {checked: this.getValue()}
},
applyState: function(state) {
	this.setValue(state.checked);
}

(but you'll first need this bugfix)

[NoahK17]

That bit of code should be put in the API docs as an example

[dnoizet]

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

[reedcat]

For Ext4 the event name in Condor's example should be 'change', not 'check'

[dnoizet]

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):

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

    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!