Can't call another function inside a controller

[bagusflyer]

I'm a programer has more than 10 years experience and I'm familiar with C/C++, Java, Objective-c etc. It only took me less than one week to start my first real project of Objective-C in App Store. But I have to say I'm not used to Sencha Touch (1.1 and 2.0). The learning curve for me seems to be quite steep. The language and example seems very simple but when I start to program myself I found it's very difficult to start and I don't even know where to start.

OK, before I ask my question, here is brief description of what I'm trying to do. I have a root controller with an automatically created viewport. There are two buttons in a toolbar in my viewport: a left button and a right button. (The title ,visibility and function will be changed according to which view will be inside the viewport).

Inside the controller, I'll check the status of a MyProfile. (I have a UserModel and a MyProfile store for this purpose, the data in store will be in local storage by using a localstorage-proxy).If there is no user profile in store, I'll create a UserProfile View to allow user input his name, sex, etc. At this time, the two button in my viewport will be "About" and "Save". The "About" button will used to provide kind of "about me" information. The "Save" button will be used to save the user profile data. After the user save his profile I'll goto another view, let's call it SecondView.

If the user profile already exist, then I'll go directly to SecondView.

The app.js, Viewport.js, UserModel.js (model) and MyProfile.js (store) and 3 views: About,MyProfile and SecondView are all straightforward. The problem is inside my controller. Here is the code:




Ext.define('App.controller.Root', {
extend: 'Ext.app.Controller',

stores: ['MyProfile'],
views:['MyProfile'],

refs : [{
ref : 'viewport',
selector : 'app-viewport'
},{
ref : 'myProfileView',
selector : 'app-myprofile'
}],
onLaunch: function() {
console.log('onLaunch root controller');

var store = App.store.myProfile;
if ( store )
{
if ( store.first() ) // data exist already
{
this.showSecondView();
return;
}
}
// no profile yet
this.showProfile();
},

showProfile: function() {
console.log('Show user profile');

var viewport = this.getViewport();
var leftBtn = viewport.query('#'+LEFTBTN)[0];
leftBtn.setText('About');
leftBtn.show();

leftBtn.setHandler(function()
{
console.log('leftButton clicked.');
this.showAbout();
});


var rightBtn = viewport.query('#'+RIGHTBTN)[0];
rightBtn.setText('Save');
rightBtn.show();

rightBtn.setHandler(function()
{
// save my user profile
});
var profileView = Ext.create('App.view.MyProfile');
viewport.add(profileView);
},

showSecondView: function() {
console.log('Show second view');
// shift to another controller
},

showAbout: function() {


if( !this.aboutView)
{
this.aboutView =this.render({xtype:'About'});
}

var leftBtn =this.application.viewport.query('#'+LEFTBTN)[0];
leftBtn.setText('Back');
leftBtn.show();

// dispatch method
leftBtn.setHandler(function()
{
// back to home (profile)
});

var rightBtn =this.application.viewport.query('#'+RIGHTBTN)[0];
rightBtn.hide();

this.getViewport.setActiveItem(this.aboutView);
}

});


There is an error message when I click the "About" button after "leftButton clicked." message in console:

Uncaught TypeError: Object [object Object] has no method 'showAbout'

Can anybody advise what could be wrong with my code? And give me some suggestion how should I learn Sencha Touch, especially version 2.

Great thanks.

[mitchellsimoens]

Hello and welcome to the world of Web Development! So the problem is you have a scoping issue. Scope is one of the challenges for people coming from other languages to JavaScript. You have this


leftBtn.setHandler(function() {
console.log('leftButton clicked.');
this.showAbout();
});

The scope 'this' is of the button. To overcome this in your showProfile method you can do this:


showProfile: function() {
console.log('Show user profile');

var me = this,
viewport = this.getViewport(),
leftBtn = viewport.query('#'+LEFTBTN)[0];
leftBtn.setText('About');
leftBtn.show();

leftBtn.setHandler(function() {
console.log('leftButton clicked.');
me.showAbout();
});


var rightBtn = viewport.query('#'+RIGHTBTN)[0];
rightBtn.setText('Save');
rightBtn.show();

rightBtn.setHandler(function()
{
// save my user profile
});
var profileView = Ext.create('App.view.MyProfile');
viewport.add(profileView);
},

You can see the two parts in red. You are caching the scope of the showProfile method which should be the controller to the variable 'me' and then accessing that from within the handler you are setting to the leftBtn.

[bagusflyer]

OK, I see. The button handler's actually in the button's object.

Thanks for your patience, Mitchell, you're the best.

Can you give me some advise on where I should start for Sencha Touch 2 programming. Should I read a Javascript book? Honestly, the JS syntax and Sencha Touch example seems to be not difficult to read. But when I start to program I don't know where to start or even don't know what to ask sometimes.

[mitchellsimoens]

If you really want to be a successful web dev, you should get a handle on JavaScript. The Sencha Touch api makes it easy to get into web development but if you want to do anything custom or work your way around, JavaScript knowledge is preferred otherwise you will probably have a hard time. It seems you are trying to learn two things at once but the Sencha Touch api isn't hard to understand... a class is just a glorified Object and we fire events. Of course the whole MVC architecture is proprietary.

[bagusflyer]

Thanks for your advice.