Wie wechsle ich die Ansicht in Sencha Touch? Momentan wird eine neue Ansicht angezeigt, die sich aber anscheinend mit der vorhandenen Ansicht überschneidet. Ich denke, ich muss das Vorherige verstecken oder es zerstören. Ich dachte daran, vielleicht zu verwendenExt.getCmp("noteslist") Dies gibt jedoch "undefiniert" zurück, wenn versucht wird, den aktuellen Container abzurufen. Ist dies die empfohlene Methode zum Navigieren zwischen Ansichten oder gibt es eine bessere Methode?

App

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

    launch: function () {

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

Regler:

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");
    }
});

Aussicht

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"
            }]
        }]
    }