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
        },