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

Could you tell us more about the flow of your app. This way we could find a correct structure for your views. Is it an app with a tab bat or an app where you can navigation in (including a back button) ? — Titouan de Bailleul
Added more code, nothing special just a simple view container instantiated from app.js and the TestList view is the same as the notes view but just with a different name. — jaffa

Nikolai Borisik Nikolai Borisik · Accepted Answer · 2012-11-27T19:47:20

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.

How to switch a view container using Sencha Touch?

2 Answers