Change View in Sencha Architect

Question

I am fairly new to Sencha Architect, as well as EXTJs. I have created an application with multiple Views (2 Containers). I am trying to switch views when clicking a button in container1. I have an event created which fires fine, what i don't know is how to switch to the next view? I've tried:

if(Ext.getCmp('mainView'))
{
    Ext.Viewport.setActiveItem(Ext.getCmp('mainView'));
}
else 
{
    var view = Ext.create('Snapwire.view.mainView');
    Ext.Viewport.setActiveItem(view);
} 

But this just throws a console error:

Uncaught TypeError: Object function () {
            return this.constructor.apply(this, arguments);
        } has no method 'setActiveItem' 

Thanks!

Answer 1

You can achieve what you want using navigation view Please check this link

http://docs.sencha.com/architect/2/#!/guide/navigationview

Hope it Helps ^^

Answer 2

Ext.getCmp('mainView') only returns your main view if you set an id for it. In your class definition, add this config:

id: 'mainView'

Answer 3

I did this way:

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);  
Ext.Viewport.add([
 { xtype: 'searchwords' }
 ]);  

Here,

xtype:searchwords 

is an view called SearchWords where it is defined as

alias: 'widget.searchwords'

Hope it helps you.

Answer 4

You can try using a card layout and change views with:

container.setActiveItem(1);

or

container.setActiveItem(0);

(all the containers must be added before you use setActiveItem but it will show only the active item)