麻煩與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

我是寫這篇教程的人的同事。您應該在該帖子上添加評論，因爲我向他描述了您的問題，他說他知道解決方案。

你可以添加一個鏈接到這個頁面，這樣你就不需要再次描述所有的東西。

此外，他將（很快）發佈該教程的第三部分，其中將涵蓋一些類似的內容。