PDA

View Full Version : Dynamically Changing Layout of Panel



Kith
12 Apr 2012, 6:09 AM
Hey,
I was wondering, is there a way in Ext JS to be able to change the layout of a panel dynamically? Here's a little background so you can understand what I'm trying to do.

I'm trying to develop a website that responds to the size of the viewport. Once the viewport decreases to a certain width, I want to change the layout of the panel from "hbox" to "vbox" to make it fit better in this smaller viewport. I've been able to simulate this by removing all the items from the panel, changing the layout type, and re-adding the components. This is a bit slow though, and it results in having a new, clean version of the components as opposed to the same ones that the user was working on. Any information on them that the user entered would be lost. I suppose I can store the information temporarily, and add it to the new components, but I don't think I want to go down that route. Any suggestions?

Thanks

stewardsencha
12 Apr 2012, 8:54 AM
I am no expert but logically it seems you could have your panel attached to a model/store so the fields are automatically populated (hydrated is the new populated). Make your field components "data-aware".

Have the two panels prebuilt and defined and swap them in and out of the viewport (instead of tearing down or rebuilding new)

Or just change the layout config and call doLayout ? Isn't that supposed to ....