Javascript Sencha Touch MVC出现问题

我正在尝试学习如何使用Sencha Touch构建web应用程序。我一直在遵循教程，我有点卡住了。下面创建了一个控制器、两个视图和一个模型（所有其他代码都是从教程中复制和粘贴的）。第一种观点是，索引非常有效。但是，如果我尝试访问第二个，它会显示一个空白页面，工具栏按钮都不起作用，也不会触发警报

如果我注释掉了行

this.application.viewport.setActiveItem（this.editGyms），警报将触发，但显然，它不会呈现页面

我看了其他几个教程，它们似乎也在使用
setActiveItem
成员切换视图。。我是否遗漏了什么，或者我是否必须以某种方式停用第一个视图以激活第二个视图或其他什么

HomeController.js

Ext.regController('Home', {

//Index
index: function()
{
    if ( ! this.indexView)
    {
        this.indexView = this.render({
            xtype: 'HomeIndex',
        });
    }
    this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
    if ( ! this.editGyms)
    {
        this.editGyms = this.render({
            xtype: 'EditGymStore',
        });
    }
    this.application.viewport.setActiveItem(this.editGyms);
    Ext.Msg.alert('Test', "Edit's index action was called!");
},
});

视图/home/HomeIndexView.js

App.views.wodList = new Ext.List({
    id:      'WODList',
    store:   'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' +  '<div class="list-item-narrative">{wod}</div>'
});

App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]  
});
Ext.reg('HomeIndex', App.views.HomeIndex);

模型/appModel.js

Ext.regModel('WOD', {
idProperty: 'id',
fields: [
    { name: 'id', type: 'int' },
    { name: 'date', type: 'date', dateFormat: 'c' },
    { name: 'title', type: 'string' },
    { name: 'wod', type: 'string' },
    { name: 'url', type: 'string' }
],
validations: [
    { type: 'presence', field: 'id' },
    { type: 'presence', field: 'title' }
]
});

Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
    property: 'id',
    direction: 'DESC'
}],
proxy: {
    type: 'localstorage',
    id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});

谢谢你的帮助
 我是你提到的教程的作者的同事。你应该在那篇帖子上加一条评论，因为我向他描述了你的问题，他说他知道解决办法

您可以只添加一个链接到此页面，这样您就不需要再次描述所有内容

他还将（很快）发布该教程的第三部分，其中将介绍一些类似的内容。
在HomeController.js中，您的操作函数（
editGyms
）与视图中使用的变量（
this.editGyms
）同名，因此当它尝试
setActiveItem（this.editGyms）时
它实际上传递的是控制器操作函数，而不是
this.render（{…}）的结果。

更改控制器操作的名称或更改用于保存视图的变量的名称。。像

editGyms: function() {
  if ( ! this.editGymView) {
    this.editGymView = this.render({
      xtype: 'EditGymStore',
    });
  }
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}

啊，是的，很好，这是有道理的。我确实改变了，但是我仍然得到了同样的效果……嗯，我不知道——我花了一分钟时间把你发布的所有东西都粘贴到了一个裸应用程序中，在做了上面的更改后，效果很好。编辑您的帖子以显示新的editGyms功能，除此之外，我只能假设这是您发布的代码以外的问题，比如在html中不包含文件之类。是的，我感谢您的帮助和第二次查看。我忽略了在index.html中包含view js文件。我添加了include，现在它可以正常工作了。谢谢你的帮助！你知道多久吗？我期待着第三部分。在我添加了这条评论几个小时后，这篇文章已经发表了。你可以在这里看到
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
    {
        xtype: 'toolbar',
        title: 'The Daily WOD',
        buttonAlign: 'right',
        items: [
        {
            id:     'loginButton',
            text:   'Login',
            ui:     'action',
            handler: function() {
                Ext.Msg.alert('Login', "This will allow you to Login!");
            }
        },
        {
            xtype:  'spacer'
        },
        {
            xtype:  'button',
            iconMask: true,
            iconCls:  'refresh',
            ui:     'action',
            handler: function() {
                Ext.Msg.alert('Refresh', "Refresh!");

            }
        }]
    },
],
});

editGyms: function() {
  if ( ! this.editGymView) {
    this.editGymView = this.render({
      xtype: 'EditGymStore',
    });
  }
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}