PDA

View Full Version : Application layout



TheDude55
14 Jan 2011, 1:19 AM
Hi. In a typical web application, I would have a number of pages and would navigate via the menu to each of these pages. I imagine that using ext js, I would have only one page which I would then switch components in and out based on the menu option selected - is this correct? I'm using a viewport - any hints on the how I would remove a component and add a new one in? Thanks

devtig
14 Jan 2011, 2:43 AM
you're right.


somePanel.add(component); //adds a component
somePanel.remove(component); //removes a component
somePanel.add(otherPanel.remove(component)); //moves a component
viewPort.doLayout();

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

TheDude55
14 Jan 2011, 4:58 AM
Thanks devtig

mschwartz
14 Jan 2011, 6:47 AM
The API docs say that the component will be destroyed if autoDestroy is true (default true) for somePanel.

The remove() method takes an optional second parameter autoDestroy which if not provided defaults to the panel's autoDestroy config value (default true).

So this:


somePanel.add(otherPanel.remove(component)); //moves a component


Should probably be this:


somePanel.add(otherPanel.remove(component, false)); //moves a component


I've not tried the above code, so I can't vouch that it works. When you remove() a component, that component's rendered state will be true, and unless remove clears it, not sure that doLayout() will do the right thing.

Though:


viewPort.doLayout(false, true);


Should work.

TheDude55
14 Jan 2011, 7:10 AM
Thanks guys, that helps a lot - much appreciated