View Full Version : Dynamic items array in panel with single item instances

21 Aug 2009, 3:49 AM
I have the following situation....

I'm creating a single-page website with extjs. I've devided the page into objects and every object has it's own js class containing Extjs objects. For instance....

I have the following js classes (and a lot more)...


MainPanel is a Panel with a border-layout in a Viewport. "Projects" and "Cases" are panels with region "center", "Events" has a "south" region. 'Page one' (or actually 'view' since no new page is loaded) has "Cases" and "Events" loaded in the "MainPanel", view two has the Projects panel loaded in the MainPanel (so the "Cases" and "Events" panels have to be unloaded/hidden).

When the page is loaded, a single js object is created which creates all other objects (is this design pattern called singleton?). So....

var MyApp = new App();
MyApp.MainPanel.add([MyApp.Cases.panel, MyApp.Cases.panel]);...works fine (where .panel is a method name I chose for addressing the ExtJs panels residing in my custom objects).
MainPanel is intended to be the most dynamic/changing part of the page. It should be able to contain all the different views. The js framework I've created for the site only exists once, so do the child objects of "MyApp", and that's the way I want it. I want to initiate all objects once when the page is loaded, then (re)use them without creating new instances. Now comes the problem....

If I want to clear the MainPanel container I can use....

MyApp.MainPanel.removeAll(true);..this does clear the MainPanel, but destroys the object instances in it ([MyApp.Cases.panel, MyApp.Cases.panel])! I want to be able to reuse the objects (show them again in the same panel).
If I use...

MyApp.MainPanel.removeAll(false);...the iems are not removed/still visible.

So I've tried adding all possible items that I want to be able to show in the MainPanel by default and hiding and showing them when switching views, but this means there have to be multiple panels loaded, assigned to the same region in the border-layout (MainPanel). This doesn't work.

Can someone please tell me how to make this work.... It's driving me nuts :)
Thank you in advance!

21 Aug 2009, 4:12 AM
@bramvano -- The removeAll method returns an array of what was removed from the Container.

When passing false (don't destroy) as the method argument, the DOM Elements are not removed from the DOM's node heirarchy. That's your job, now.

You'll need to keep a reference to that collection for use later. Try something like:

MyApp.MainPanel.held = MyApp.MainPanel.removeAll(false);
Ext.each(MyApp.MainPanel.held, function(C){

Ext.getBody().appendChild(C.getEl()); //Move each elsewhere


This allows the parent Container's DOM structure to reflow normally when doLayout is called.

Adding them back later would look like:

var P = MyApp.MainPanel;
P.add.apply(P, P.held);

Tweak it ;)

21 Aug 2009, 4:17 AM
I get it, great...thanks! :)