How to switch a view container using Sencha Touch?

Question

How do I switch views in Sencha Touch? Currently I have a new view being shown, but it looks like it overlays onto the existing one. I think I need to hide the previous or destroy it. I was thinking of maybe using Ext.getCmp("noteslist") but this returns 'undefined' when trying to get the current container. Is this the recommended way of navigating between views or is there a better way?

App

Ext.application({
    name: "NotesApp",
    controllers: ["NotesController", "TestController"],
    views: ["NotesListContainer"],

    launch: function () {

        var notesListContainer = Ext.create("NotesApp.view.NotesListContainer");
        Ext.Viewport.add(notesListContainer);
    }
});

Controller:

Ext.define("NotesApp.controller.NotesController", {
    extend: "Ext.app.Controller",
    views: [        
        "TestListContainer"
    ],
    config: {
        refs: {
            newNoteBtn: "#new-note-btn",
            saveNoteBtn: "#save-note-btn",
        },
        control: {
            newNoteBtn: {
                tap: "onNewNote"
            },          
            saveNoteBtn: {
                tap: "onSaveNote"
            }
        }
    },
    onNewNote: function () {
        console.log("onNewNote");
    },
    onSaveNote: function () {
        console.log("onSaveNote");      
        Ext.Viewport.add({xtype:'testlist'}).show();    
            // How do I remove the current one?....         
    },
    launch: function () {
        this.callParent();
        console.log("launch");
    },
    init: function () {
        this.callParent();
        console.log("init");
    }
});

View

Ext.define("NotesApp.view.NotesListContainer", {
    extend: "Ext.Container",   
    config: {
        items: [{
            xtype: "toolbar",
            docked: "top",
            title: "My Notes",
            items: [{
                xtype: "spacer"
            }, {
                xtype: "button",
                text: "New",
                ui: "action",
                id:"new-note-btn"
            }, {
                xtype: "button",
                text: "Save",
                ui: "action",
                id:"save-note-btn"
            }]
        }]
    }

Answer 1

Using Ext.Viewport.add you only add component to viewport, but not set it as active item. You can use Ext.Viewport.setActiveItem for add component and set it as active item in one call.

Example:

//1
Ext.Viewport.setActiveItem({xtype:'testlist'});

//or 2
//Create and add to viewport
Ext.Viewport.add({xtype:'testlist'});
//set active item by index
Ext.Viewport.setActiveItem(1);

//or 3
var list = Ext.create('NotesApp.view.NotesListContainer', {id : 'noteList'});
Ext.Viewport.add(list);
 .....
//In place where you need to show list
Ext.Viewport.setActiveItem(list);

If you want to animate swiching between views then use animateActiveItem(list, {type: 'slide', direction: 'right'}) instead a setActiveItem.

It's how you can work with Ext.Viewport and any container with card layout. In the real application view can be created in one part of app(in the controller, int the app, in the view) and set as active in other part. In this case you need get link to the list by any way and use it in the setActiveItem.

Answer 2

There are two techniques 1 using setActiveItem and the other using navigation view...

Navigation View

Set Active item method:

var view=Ext.Viewport.add({xtype: 'testlist'});
Ext.Viewport.setActiveItem(view);
view.show(); //This is additionally done to fire showAnimation