Sencha Touch MVC 的问题

Question

我正在尝试学习如何使用 Sencha Touch 来构建网络应用程序。我一直在关注教程Here，但我有点卡住了。下面创建了一个控制器、两个视图和一个模型（所有其他代码都是从教程中复制和粘贴的）。第一个视图，Index 效果很好。但是，如果我尝试访问第二个，它会打开一个空白页面，工具栏按钮都不起作用，也不会触发警报。

如果我注释掉 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!");
},
});

views/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);

views/home/EditGymStore.js

App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',

});
Ext.reg('EditGymStore', App.views.EditGymStore);

models/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/>' }
]
});

带有工具栏的viewport.js

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

            }
        }]
    },
],
});

感谢您的帮助！

Answer 1

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

Answer 2

我是编写您所指教程的那个人的同事。您应该对该帖子添加评论，因为我向他描述了您的问题，他说他知道解决方案。

您可以只添加一个指向此页面的链接，这样您就无需再次描述所有内容。

他还将（非常）很快发布该教程的第三部分，其中将涵盖一些类似的内容。