Question

I’m trying to learn how to use Sencha Touch to build web apps. I’ve been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn’t fire the alert.

If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn’t render the page.

I’ve looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?

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 with toolbar

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

            }
        }]
    },
],
});

Thanks for the help!!

Answer 1

In HomeController.js your action function (editGyms) is the same name as the variable you’re using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})

Either change the name of the controller action or change the name of the variable you use to hold the view.. like

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