Question

我正在尝试学习如何使用Sencha Touch构建网络应用程序。我一直在关注教程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

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

您只需添加指向此页面的链接，便无需再次描述所有内容。

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

Answer 2

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

Sencha Touch MVC遇到麻烦

2 个答案: