Sencha touch Sencha touch不使用控制器显示视图

我的控制器中有以下代码，我正试图简单地切换一个视图。 有人能解释一下如何显示视图吗

Ext.define('MyApp.controller.HomeController', {
    extend: 'Ext.app.Controller',

    config: {
        views: [
            'Home',
            'ChangeEmailView'
        ],

        refs: {
            changeEmailView: {
                selector: '#btnChangeEmail',
                xtype: 'ChangeEmailView'
            }
        }
    },

    init: function(application) {
        alert("init");
    },

    launch: function() {
        alert("launch");
    }

});

视图：

---

最简单的方法如下：

showChangeEmailView: function () {
    Ext.Viewport.add(this.getChangeEmailView());
    this.getChangeEmailView().show({
        type:'slide',
        direction:'up'
    });
}

但这实际上取决于你的应用程序结构。可能您正在使用NavigationView，然后需要推送该视图

---

希望这有帮助

对不起，我忘了显示方法。用SenchaFiddle更新了我的答案，所以你没有控制器，我是否应该删除我的并用视图上的按钮处理程序替换？不，你应该保留你的控制器。最好将逻辑和代码与视图定义分开。我没有在SenchaFIDLE中使用控制器，因为创建一个控制器只是为了向您演示如何显示视图会很麻烦。但是如果您仍然感到困惑，我可以使用控制器来完成。是的，我发誓我读过一些东西，xtype会自动创建视图，因此不需要添加到视口。你能举个例子说明可能的视图显示方式吗？谢谢你的帮助。

showChangeEmailView: function () {
    Ext.Viewport.add(this.getChangeEmailView());
    this.getChangeEmailView().show({
        type:'slide',
        direction:'up'
    });
}