Sencha touch 如何使用Sencha Touch切换视图容器？

如何在Sencha Touch中切换视图？目前，我有一个新的视图正在显示，但它看起来像是覆盖在现有的一个。我想我需要隐藏以前的信息，或者销毁它。我曾考虑过使用

Ext.getCmp（“noteslist”）

，但在尝试获取当前容器时，会返回“undefined”。这是在视图之间导航的推荐方式还是有更好的方式

应用程序

控制器：

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

看法

---

使用Ext.Viewport.add只能将组件添加到视口，但不能将其设置为活动项。您可以使用Ext.Viewport.setActiveItem添加组件，并在一次调用中将其设置为活动项

例如：

//1
setActiveItem（{xtype:'testlist'}）；
//或2
//创建并添加到视口
add（{xtype:'testlist'}）；
//按索引设置活动项
Ext.Viewport.setActiveItem（1）；
//或3
var list=Ext.create（'NotesApp.view.NotesListContainer'，{id:'noteslist'}）；
Ext.Viewport.add（列表）；
.....
//在需要显示列表的地方
Ext.Viewport.setActiveItem（列表）；

如果您想为视图之间的切换设置动画，请使用animateActiveItem（列表，{type:'slide'，direction:'right'}），而不是setActiveItem

---

这就是如何使用Ext.Viewport和任何具有卡片布局的容器。在实际应用程序中，可以在应用程序的一个部分（在控制器中，在应用程序中，在视图中）创建视图，并在其他部分中设置为活动。在这种情况下，您需要以任何方式获取列表的链接，并在setActiveItem中使用它

有两种技术：一种是使用setActiveItem，另一种是使用导航视图

设置活动项方法：

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

---

你能告诉我们更多关于你的应用程序的流程吗。这样我们可以为您的视图找到正确的结构。它是一个带有标签的应用程序还是一个可以导航的应用程序（包括后退按钮）？添加了更多代码，没有什么特别的，只是从app.js实例化了一个简单的视图容器，TestList视图与notes视图相同，只是名称不同。这是在应用程序中显示视图的推荐模式还是有更好的方法？我觉得有点复杂。我补充了更多的解释，希望能对你有所帮助。

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

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