1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default Can't call another function inside a controller

    Can't call another function inside a controller


    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:

    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,795
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    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

    Code:
            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:

    Code:
        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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,795
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    42
    Vote Rating
    0
    bagusflyer is on a distinguished road

      0  

    Default


    Thanks for your advice.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi