1

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!!

2 Answers 2

0

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!");
}
3
  • Ah, yes good point, that makes sense. I did change that, however I am still getting the same effect..
    – Derek
    Aug 9, 2011 at 18:21
  • Hmm, I dunno-- I took a minute and pasted everything you posted into a bare app and after making the change above it worked fine. Edit your post to show your new editGyms function, other than that I can only assume its a problem with something other than the code you posted, like not including a file in your html or something like that.
    – chrixian
    Aug 9, 2011 at 20:51
  • Yes, I appreciate your help and the second look through. I had neglected to include the view js file into index.html. I added in the include and now it works properly. Thanks for your help!
    – Derek
    Aug 10, 2011 at 17:25
0

I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.

You can just add a link to this page so that you won't need to describe everything again.

Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.