Extjs How to make Grid Column Header Menu options persist in Cookies (Stateful)

Question

Using Sencha Architect Version 3.0.2

ExtJS 4.1

I am trying to make the selections in the Grid column headers stateful and save them in a cookie. What I am after is the Columns menu that further dropdowns to list the columns in the grid with a Checkbox besides it. Selecting/Un-selecting this box will unhide/hide the respective column.

I want to save this setting so that next time the user loads the grid, a column that is unselected before is hidden and does not appear (until obviously cookies are cleared).

Example Fiddle Located here

Following is the menu I am talking about:

Answer 1

Set stateProvider and make the grid stateful:true with stateId, fiddle here: https://fiddle.sencha.com/#fiddle/a6s