I am new to Sencha Touch and trying to feel my way around. I am working on building a test application using a MVC structure I found online. It was going well but I am trying to the point where I want users to be able to navigate using a custom menu and I am not sure how to do this. I tried to use setActiveItem but it seems it is out of scope in my structure and I don't know what to do to fix this.

App.js
Code:
//AUTOMATICALLY LOAD DEPENDENCIES
Ext.Loader.setConfig({ enabled: true });


//LOAD THE PRIMARY APPLCIATION
Ext.application({
    
    phoneStartupScreen: 'images/sencha_logo.png',
    name: 'zlapp', 
    cardAnimation: 'slide', 
    controllers: ['home','conditions'],    


    launch: function() {         
        console.log('app launch');
        var screen = Ext.create('Ext.Panel', {
            fullscreen: true,
            id: 'screen',
            layout: 'card',
            items: [
                { xtype: 'home' },
                { xtype: 'simplelist' }                
            ]
        });
        
    }


});
Main View
Code:
//CREATES THE LOGO PANELvar logo = new Ext.Panel ({
    flex: 2,
    layout: 'vbox',
    html: 'Logo Goes Here'
});


//CREATES THE NEWS SWITCHER
var switcher = new Ext.Carousel({
    flex: 3,
    items: [
        { style: "background-color: #990000;" },
        { style: "background-color: #FFFFFF;" }
    ]
});


//CREATES THE LEFT COLUMN
var left = new Ext.Panel ({
    layout: {
           type: 'vbox',
           pack : 'center'
    },
    flex: 1,
    items: [
            { 
                xtype: 'button',
                id: 'triggerConditions',
                text: 'Conditions' 
            }
    ]


});


//CREATES THE LEFT COLUMN
var right = new Ext.Panel ({
    layout: {
           type: 'vbox',
           pack : 'center'
    },
    flex: 1,
    html: 'Right Column',
});




//CREATES THE HOMEPAGE MAIN CONTENT AREA
var content = new Ext.Panel ({
    flex: 8,
    layout: 'hbox',
    items: [left,right]
});




//EXTENDS EXT TO CREATE THE HOME PANEL
Ext.define('zlapp.view.home', {
    extend: 'Ext.Panel',
    alias: 'widget.home',
    config: {
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [logo,switcher,content]
    },
    initialize: function() {
        this.callParent();
    }
});
Main controller where I am trying to change the view.
Code:
Ext.define('zlapp.controller.home', {
    extend: 'Ext.app.Controller',    
    views: ['home'],
    
    init: function() {
        console.log('Init home controller');
        this.control({
            '#triggerConditions': { 'tap': function () {
                        console.log('Only the button with id=firstButton says Hello');
                        //zlapp.panel.setActiveItem('simplelist', {type: 'slide', direction: 'left'});
                        console.log(zlapp);
                    } 
                }            
        });
    },
    
});
Basically, I am trying to switch from my home view to my simplelist view but can't figure out how to do it given the MVC structure I am working with.