麻烦与Sencha触摸MVC

Question

我想学习如何使用Sencha触摸来建立网络应用程序。我一直在按照教程Here，我有点卡住了。下面创建了一个控制器，两个视图和一个模型（所有其他代码都是从本教程复制粘贴&）。第一种观点，索引工作很好。但是，如果我尝试访问第二个，它会弹出一个空白页面，没有任何工具栏按钮可以工作，也不会触发警报。

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

的意见/家庭/ 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); 

的意见/家庭/ EditGymStore.js

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

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

型号/ 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

我是写这篇教程的人的同事。您应该在该帖子上添加评论，因为我向他描述了您的问题，他说他知道解决方案。

你可以添加一个链接到这个页面，这样你就不需要再次描述所有的东西。

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