MVC change view from one to another in the controller

[Hakkert]

Hi

I have a controller with two views. In one of the views a have a button with a click listener. On that click i want to change the view from one to the other. Whats the best way to do this?

I already have the click listener in place so the only thing i need to know is how to switch views.

[arthurakay]

Changing the view depends on your layout.

It would be the same as adding/removing or showing/hiding parts of any widget in the framework. Card layouts would call setActiveItem(), whereas Fit layouts might have to completely destroy their children items.

Assuming your application is simply a viewport displaying some panel, your controller would simply ask the viewport to hide/remove the existing view, and show/add the new view. Calling doLayout() might need to happen as well, depending on your setup.

[Hakkert]

Maybe you can help.

var master = Ext.ComponentManager.get('idMasterView');
        var centerPanel = Ext.ComponentManager.get('idCenterPanel');


        var newCenterPanel = Ext.widget('mainCenterTabPanelView');
        newCenterPanel.id = 'idCenterPanel';
        newCenterPanel.name = 'idCenterPanel';
        newCenterPanel.region = 'center';


        newCenterPanel.isVisible(true);
        
        master.add(newCenterPanel);


        centerPanel.hide();
        newCenterPanel.show();
        master.doLayout();

The centerPanel hides but the new panel doesn't show. I'm not sure why this is. Anyone an idea?

[arthurakay]

I'm guessing you're using a border layout... which doesn't allow you to add/remove children after it's been created.

However, you can add/remove children on the component already existing in the "center" panel. Does that make sense?

In other words, a container with "border" layout might have a panel in it's "center" region. Add/remove children to the panel... not the parent.