Hi,
I'm experiencing strange behavior with the ExtJs Panels. The Panels in my scenario are not maintaining there state with all the proper settings.
Here is the scenario:
I've a West Region where I'm adding three panels. I need the user to be able to resize them independently and I want them to maintain there state.

Here is my config:

{
xtype: 'panel',
title: 'MARK C RKZBLK',
width: 235,
collapsible: true,
titleCollapse: true,
collapsed: false,
animCollapse: true,
split: true,
margins: '3 0 3 3',
cmargins: '3 5 3 5',
buttonAlign: 'right',
region: 'west',
floatable: false,
border: true,
bodyStyle: 'border:0;background-color:#DFE8F6',
stateful: true,
stateId: 'westregion',
autoScroll: true,
items: [{
xtype: 'box',
height: 5
}, {
xtype: 'panel',
title: 'Summary',
collapsible: true,
collapseFirst: false,
titleCollapse: true,
height: 200,
stateful: true,
stateId: 'toppanel1',
autoScroll: true,
html: '<span>Summary Panel</span>',
tools: [{
id: 'minimize',
handler: function (event, toolEl, panel) {
if (panel.collapsed == false) panel.setHeight(panel.getHeight() - 25)
}
}, {
id: 'maximize',
handler: function (event, toolEl, panel) {
if (panel.collapsed == false) panel.setHeight(panel.getHeight() + 25)
}
}]
}, {
xtype: 'box',
height: 5
}, {
id: 'wflowpanel',
xtype: 'panel',
title: 'Workflow',
collapsible: true,
collapseFirst: false,
titleCollapse: true,
height: 200,
stateful: true,
stateId: 'wflowpanelregion',
stateEvents: ['collapse'],
autoScroll: false,
layout: 'fit',
items: [WorkflowGrid.grid],
tools: [{
id: 'minimize',
handler: function (event, toolEl, panel) {
if (panel.collapsed == false) panel.setHeight(panel.getHeight() - 25)
}
}, {
id: 'maximize',
handler: function (event, toolEl, panel) {
if (panel.collapsed == false) panel.setHeight(panel.getHeight() + 25)
}
}]
}, {
xtype: 'box',
height: 5
}, {
xtype: 'panel',
title: 'Notes',
collapsible: true,
collapseFirst: false,
titleCollapse: true,
height: 200,
stateful: true,
autoScroll: true,
html: '<span>Comments Panel</span>',
tools: [{
id: 'minimize',
handler: function (event, toolEl, panel) {
if (panel.collapsed == false) panel.setHeight(panel.getHeight() - 25)
}
}, {
id: 'maximize',
handler: function (event, toolEl, panel) {
if (panel.collapsed == false) panel.setHeight(panel.getHeight() + 25)
}
}]
}, {
xtype: 'box',
height: 5
},
]
}