ExtJS grid save cookies for show/hide columns

[gjjagadeesh]

1. Register a cookie provider:

Ext.state.Manager.register(new Ext.state.CookieProvider());

2. Disable state management for all components by default:

Ext.Component.prototype.stateful = false;

3. Enable state management for the grid:

stateId: 'mygrid',
stateful: true

4. Give all your columns an id (otherwise they will be stored by number, which would break if you ever add columns).

Condor-

Do we need to enable cookies in our local system? If yes, how do we do it and how do we validate whether the cookies are storing in our system or not?

[Condor]

Yes, you need to enable cookies on the system for this to work, but state tracking will simply be ignored if they are not enabled, so nothing breaks.

AFAIK checking if cookies are enabled is simply a matter of adding a cookie and checking if it exists.

[wawrek]

Hi Condor,

Do you know by any chance how to enable cookies in order to save the state of a grid (when that one is modified). On page refresh, the browser doesn't load the modifications made to a grid. I also have this error:

Uncaught TypeError: Cannot read property 'items' of undefined
Ext.define.getState                                                          
Ext.define.saveState 

it refers to this line in ext-all-debug.js (line:74960)

    getState: function(){        
        var state = this.callParent(),            
        sorter = this.store.sorters.first(),            
        headers = this.headerCt.items.items,
        header,        
        len = headers.length,            
        i = 0; 

Until now, I haven't been able to use grids with saved state.

I use ext-4-0-2a

[kgo]

Using CookieProvider and stateManager, I was able to save changes to my grid. I rearrange and hide columns and when I refresh the page or log out of my application, my changes are still there as long as I don't close my browser. However, if I close the browser and re-launch it, the grid is back to its original configuration. When I look at the cookie properties on my browser, it always says expires "at end of session" even if I specified 30 days in my CookieProvider. Does anyone know how I can fix this?

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*30)), //30 days
    domain: "trinet.trimet.org"
}));


//grid
mmis.pending.pendingGrid = new mmis.pending.Grid({
  store : mmis.pending.storePendList,
  title: 'Work Order List',
  region:'center',
  height:200,
  autoScroll: true,
  layout:'fit',
  stateId: 'pending_grid_id',
  stateful: true,
  stateEvents: ['columnresize', 'columnmove', 'show', 'hide']
});

[dotnetwise]

At the end of the session = at the end of the browser.

Make it never expire by the session.

[cogane1010]

I'm trying to save state column in grid , i'm using stateful , but there are only hide column & sort column, working well,
But resize column still does not work.

Is there anybody could help me please?

There is my grid:

 gridContent = new Ext.grid.EditorGridPanel(        {
            id: 'gridContent',
            name: 'gridContent',
            store: store,
            cm: cm,
            plugins: [this.action, Filters()],
            viewConfig: { forceFit: true, scrollOffset: 0 },
            stripeRows: true,
            border: false,
            trackMouseOver: true,
            autoScroll: true,
            width: width,
            columnLines: true,
            autoHeight: true,
            loadMask: true,
            stateful: true,
            stateEvents: ["columnmove", "columnresize", "sortchange", "show", "hide"],
            sm: new Ext.grid.RowSelectionModel({ singleSelect: true, moveEditorOnEnter: false }),
            tbar: [menuItems, tollbarFill, addItem]
        });

and column:

cm = new Ext.grid.ColumnModel([
        this.action, {
            id: 'id',
            header: "ID",
            dataIndex: 'id',
            width: 70,
            sortable: true
        },

[_sench_user]

The default stateEvents are ["columnmove", "columnresize", "sortchange"] and initStateEvents also adds a saveState to the colModel 'hiddenchange' event. Also, getState returns hidden state for columns and applyState applies the hidden state correctly.

So the grid should store the column hidden states!

ps. Any reason you changed the stateEvents?

State is not maintain in case we LOCK any of the column of the GRID. Even it is showing ExtJs internal Error on the console. Please help me to maintain the state of the Grid Columns when we lock the columns.
Is there any stateEvents for this. Please let me know. Thanks.

[hbulens]

The default stateEvents and initStateEvents are already correct! What happens if you simply remove stateEvents and initStateEvents from your config?

ps. You did know that you need to specify unique column ids to make state handling work correctly?

7 years later, I can tell that the last sentence did the trick for me. Specify a unique ID for each column in the grid and the headers/columns are displayed/hidden according to the state.