PDA

View Full Version : Using stateful panels with resize



silcreval
24 Feb 2017, 11:22 AM
I've added state saving support to an app that uses Ext.container.Viewport containing a border layout. I've added stateful:true and an ID to all the panels, and it works great.

However if I resize the panel - it retains the earlier size and doesnt scale. Fine - I assume I need to listen for the global resize event. But what should I do for each panel? Trigger a resize.

I guess this is a common problem so thought I should check if there is an easy solution. I'm on ExtJS 4.2.1

silcreval
27 Feb 2017, 11:58 AM
Answering my own question in case its useful for someone else.

Basically - I added an event monitor to the Application launch() function - something like this. First I clear the state then, I update the layout using a reference to the 'top most' container. In my case a viewport.


Ext.EventManager.onWindowResize(function(){
me.clearState();
Ext.ComponentQuery.query(' reference to your top level container ' ).doLayout()
}


clearState is just a convenience function that clears the state using the state id's I set for the various components.


clearState: function() {
Ext.state.Manager.clear('state-id-1');
....
}

Note this clears all your stored states which might not be desired. In my case this is what I wanted.