Extjs: how to approach the concept: Add, Remove, Add Instance

Question

Concept : Consider two panels A and B and window C , as in the following example. The buttons on the window switch between the two panels.

 var A = new Ext.Panel({ title: 'A' }); var B = new Ext.Panel({ title: 'B' }); var C = new Ext.Window({ layout: 'fit', width: 300, height: 300, items: A, buttons: [ { text: 'Switch to A', handler: function() { C.removeAll(false); C.add(A); C.doLayout(); } }, { text: 'Switch to B', handler: function() { C.removeAll(false); C.add(B); C.doLayout(); } }] }); C.show(); 

The concept is very simple: add a component, remove it, and add the same instance again.

Problem : Switching from A to B works, but returning to A fails (B remains and A is no longer displayed).

Question : Thinking OOP, I would expect this concept to work. Since this is not the case, and this is a very simple maneuver, how should I think / reflect / design when I try to do this?

I understand that when considering the FormPanel form and other layouts / components, there may be different cases, but there must be a common and correct way for this :)

Answer 1

Perhaps the card layout is exactly what you need:

 var C = new Ext.Window({ layout: 'card', width: 300, height: 300, activeItem: 0, items: [A, B], buttons: [{ text: 'Switch to A', handler: function() { C.getLayout().setActiveItem(0); } }, { text: 'Switch to B', handler: function() { C.getLayout().setActiveItem(1); } }] }); C.show(); 

I assume the problem with your code is reusing the same instance. Ext internally sets rendered -flag to the component after it is written to the DOM tree. Since the rendered flag is still preserved after removing the component from C , it will not be redrawn when the component is added again.

A simple modification will make your code work: add A.rendered = false; and B.rendered = false respectively, before you call C.doLayout() in the button handlers.

But still a mock map approach would be best practice.

Answer 2

I found a simple solution, but it's more of a hack. After removing the component (panel A or B), you must add it to another container that should be displayed. Here is an example in which panels are moved to a hidden container:

 var A = new Ext.Panel({ title: 'A' }); var B = new Ext.Panel({ title: 'B' }); var C = new Ext.Window({ layout: 'fit', width: 300, height: 300, items: A, buttons: [ { text: 'Switch to A', handler: function() { C.remove(B, false); T.add(B); C.add(A); C.doLayout(); } }, { text: 'Switch to B', handler: function() { C.remove(A, false); T.add(A); C.add(B); C.doLayout(); } }] }); var T = new Ext.Container({ renderTo: "temporaryContainer", renderHidden: true }); C.show(); 

And somewhere in the body of the page you need:

 <div id="temporaryContainer" class="x-hidden"></div> 

Tested with ExtJs 4.0.2a.