ExtJS 3 multiple stateful grids (but with different stateIds) - extjs

Question

I have my grid, which overwrites Ext.grid.GridPanel
I use this grid in 2 places on my site. I generate 2 different stateIds for them:
constructor:
TasksGrid.superclass.constructor.call(this, {
id: genId,
cls: 'tasks-grid',
border: false,
loadMask: {msg: 'Loading...'},
sm: sm,
stateful: true,
stateId: 'tasks-grid'+(config.booClientTab ? '-clients-tab' : ''), // depending on config.booClientTab I setup one or other stateId
...
this code I call in 2 places on site to create 2 grids:
this.TasksGrid = new TasksGrid(this, {
region: 'west',
split: true,
width: tasksGridWidth ? tasksGridWidth : defaultWidth,
booShowToolbar: true,
booClientTab: !empty(config.clientId) // if true, 1 stateId will be setup, false - other
});
But, when I test, state is applied only to first of 2 generated grids!! I checked cookies: seems, that all works fine: 2 cookies with 2 different names are created. But... State applies only to first call of "this.TasksGrid = new TasksGrid"!!!
ExtJS version: 3.0
Any thoughts?

Answer 1

I had the same problem. State can be applied to the component only during initialization not after initialization. Therefore it works for the first time but not after. Luckily you are using EextJs 3 and following piece of code worked for me in ExtJS 3 but not in 4. Basically when you apply new/other state to the grid just call
MyGrid = Ext.extend(Ext.grid.GridPanel,
{
/* #private */
constructor: function(config)
{
MyGrid.superclass.constructor.call(this, config);
},
initComponent: function()
{
var cfg =
{
border: true,
bodyBorder: false,
stateful: true,
stateId: 'grid',
tbar:
[{
text: 'View name'
},{
xtype: 'combo',
width: 80,
typeAhead: true,
triggerAction: 'all',
mode: 'local',
forceSelection: true,
hiddenName: 'stateId',
selectOnFocus:true,
displayField:'name',
ref: '../stateCombo',
valueField: 'id',
listeners:
{
scope: this,
change: function(combo, newValue, oldValue)
{
newValue = parseInt(newValue, 10); var grd = this;
grd.el.mask('Applying the view please wait');
var data = combo.store.data.items;
Ext.each(data, function(d)
{
d.data.id = parseInt(d.data.id, 10);
if(d.data.id === newValue)
{
Ext.util.Cookies.set('reportStateName', d.data.machineName);
grd.applyState(MyStateProvider.decodeState(d.data.value));
var conf = grd.getColumnModel().config;
grd.getColumnModel().setConfig(conf);
grd.doLayout();
grd.getView().updateAllColumnWidths();
grd.getView().refresh(true);
return;
}
});
grd.el.unmask();
grd = null;
}
},
store: new Ext.data.JsonStore
({
fields:
[{
name: 'id',
type: 'int'
}],
proxy : new Ext.data.HttpProxy
({
method: 'GET',
url: BASEURL + 'getsavedstate'
}),
idProperty: 'id'
})
}]
};
//we use applyIf for configuration attributes that should be left configurable
Ext.applyIf(this, cfg);
//ensure that any extra configurations that are set in initComponent method are applied to initialConfig:
Ext.applyIf(this.initialConfig, cfg);
/*
* Properties specified here are safe/protected from being overridden
* by an instance, so any 'private' default properties might be specified here.
*/
//some attributes we may want to keep unaltered, so we use Ext.apply non-alterable configurables
cfg =
{
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
stripeRows: true,
loadMask: true
};
Ext.apply(this, cfg);
//need this to work sometimes:
Ext.apply(this.initialConfig, cfg);
MyGrid.superclass.initComponent.apply(this, arguments);
this.on
({
afterrender: function(grid)
{
var grd = this;
this.stateCombo.getStore().load
({
callback: function(data, options, success)
{
grd.saveAsStateBtn.enable();
var applied = false;
var setStateValue = Ext.util.Cookies.get('reportStateName');
Ext.each(data, function(d)
{
//meaning no cookie was set so first time.
if(setStateValue === null)
{
if(d.data.machineName === 'default')
{
if(d.data.value !== '')
{
grd.applyState(MyStateProvider.decodeState(d.data.value));
applied = true;
grd.stateCombo.setValue(d.data.id);
return;
}
applied = true;
grd.stateCombo.setValue(d.data.id);//Here value should be fetched from cookie
return;
}
}
else//Cookie was set
{
if(d.data.machineName === setStateValue)
{
if(d.data.value !== '')
{
var s = MyStateProvider.decodeState(d.data.value);
grd.applyState(s);
applied = true;
grd.stateCombo.setValue(d.data.id);//Here value should be fetched from cookie
return;
}
else
{
return;
}
}
}
});
//grd.doLayout();
if(data.length !== 0)
{
grd.stateCombo.enable();
grd.saveStateBtn.enable();
}
var conf = grd.getColumnModel().config;
grd.getColumnModel().setConfig(conf);
grd.doLayout();
grd.getView().updateAllColumnWidths();
grd.getView().refresh(true);
grd.doLayout();
grd.el.unmask();
}
});
this.el.mask('Applying the saved view please wait');
},
scope: this
});
},
onRender: function (container, position)
{
MyGrid.superclass.onRender.apply(this, arguments);
var el = this.el;
var grd = this;
this.saveStateWindow = new MySaveStateWindow
({
grid: grd,
renderTo: el
});
},
// template method
/* #private */
initEvents: function()
{
MyGrid.superclass.initEvents.apply(this, arguments);
},
afterRender: function()
{
MyGrid.superclass.afterRender.apply(this, arguments);
},
// template method
/* #private */
beforeDestroy: function()
{
//Call parent
MyGrid.superclass.beforeDestroy.apply(this, arguments);
},
onDestroy: function()
{
this.saveStateWindow.destroy();
MyGrid.superclass.onDestroy.apply(this, arguments);
}
});