Sencha TouchのトラブルMVC

Question

Sencha Touchを使ってWebアプリケーションを構築する方法を学びたいと思っています。私はチュートリアルHereに従っていて、ちょっと立ち往生しています。以下では、1つのコントローラ、2つのビュー、およびモデルを作成しました（他のコードはチュートリアルのコピー&ペーストです）。最初のビューは、インデックスは素晴らしい作品です。しかし、2番目のページにアクセスしようとすると、空白のページが表示され、ツールバーのボタンは機能せず、警告も表示されません。

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

あなたのアクション機能（editGymsは）あなたはそれがその、実際にthis.render({...})の結果ではなく、コントローラのアクション関数を渡すsetActiveItem(this.editGyms)しようとするので、あなたのビュー（this.editGyms）のために使用している変数と同じ名前であります

どちらか

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

私はあなたが指しているチュートリアルを書いた人と同僚です。私は彼にあなたの問題を説明したので、彼は解決策を知っていると述べたので、その投稿にコメントを追加する必要があります。

このページへのリンクを追加するだけで、すべてをもう一度記述する必要はありません。

また、彼はすぐに、いくつかの同様の事柄をカバーするチュートリアルの第3部を公開します。 HomeController.jsで