PDA

View Full Version : Change layout dynamically



dstrr
17 Nov 2010, 7:25 AM
Hi to all.

If short I need dynamically change layout of panel. Sorry for no code just idea description.

Option 1:
There is panel with initial border layout having center and south regions.
Regions contain heavy components, so I need to use once created components without destroy and create new copy.
How can I "transform" panel to have border layout with center and west region.
Regions must contains heavy components created before tansformation! It's important.

Option 2:
There is panel with initial border layout having center and south regions.
Regions contain heavy components, so I need to use once created components without destroy and create new copy.
Desirable end layout is card layout containing heavy components created before tansformation.

So question, how it can be done?
p.s. for any case, I use Ext 3.2.1

Thank you.

laurentParis
17 Nov 2010, 8:03 AM
I suggest to create panel (newPanel) with border layout, and add existing children (eventualy modify dynamiquely region name) => newPanel.doLayout()

darthwes
17 Nov 2010, 8:25 AM
This is why the card layout was invented...

dstrr
17 Nov 2010, 12:25 PM
This is why the card layout was invented...
Card layout can contains the same component (not copy! it's important) in two items simultaneously? Really? As I understand one item cannot be in two different containers simultaneously... Is it so?

darthwes
18 Nov 2010, 4:54 PM
Remote Plugin thingie! (http://www.sencha.com/forum/showthread.php?18023-Ext.ux.Plugin.RemoteComponent) It's pretty hawt...Laurent's suggestion is sound; did you find traction there? You should be able to pick up the layout/component that hosts your layout and basically tell it to .remove the stuff, .add it to the appropriate places, and call doLayout, ftw.

devtig
18 Nov 2010, 11:10 PM
Create a border layout with south, center and west region. Initially hide west (or width=0). Put your components in center and south.

Then for some reason you want components that exist in one region to move to the west region. (Don't know why you would want that), but you'd do that with:


westPanel.add(southPanel.remove(component));
parentPanel.doLayout();

(remove method conveniently returns the component that was removed.)

dstrr
24 Nov 2010, 12:56 AM
Yep, thank you devtig, I used this code and it works, slow a little but works:



var component = Ext.getCmp('componentid');
westPanel.add(southPanel.remove(component, false));
parentPanel.doLayout();