1. #1
    Sencha User
    Join Date
    Jan 2013
    Location
    Salvador, Bahia - Brazil
    Posts
    21
    Vote Rating
    0
    luciano.lima is on a distinguished road

      0  

    Default Answered: Lost scope in controller

    Answered: Lost scope in controller


    Hi guys.


    In my controller, I have 3 functions connected by a custom proxy.
    In the first function I call the proxy and pass the second function as callback,
    then in the second function I call the proxy again (with other arguments) and pass the third function as callback.
    The third function run some code.


    My problem is in the second function, when I use this.thirdFunction, this refers to window object and not the controller.


    How can I keep the scope on the controller? (this return controller instead of window)

  2. I don t see where the first function is called but:

    callback: this.connectSaveUserKey,


    should be

    var self = this;
    ....

    callback: function(){ self.connectSaveUserKey(); }


    or

    callback: Ext.bind( this.connectSaveUserKey, this);


    these both should work fine IF the first function is called in the controller's scope.

  3. #2
    Sencha User
    Join Date
    Aug 2012
    Location
    Germany
    Posts
    5
    Vote Rating
    1
    lkloeppel is on a distinguished road

      0  

    Default


    Set a new variable referencing to this at the beginning of the function.

    Example:

    Code:
    secondFunction: function() {
            var control = this;
             someFunctionWithCallback({
                   callback: function(){
                        control.thirdFunction();
                   }
             }
    }

  4. #3
    Sencha User
    Join Date
    Jan 2013
    Location
    Salvador, Bahia - Brazil
    Posts
    21
    Vote Rating
    0
    luciano.lima is on a distinguished road

      0  

    Default


    This return window to var. I try this too.

    Quote Originally Posted by lkloeppel View Post
    Set a new variable referencing to this at the beginning of the function.

    Example:

    Code:
    secondFunction: function() {
            var control = this;
             someFunctionWithCallback({
                   callback: function(){
                        control.thirdFunction();
                   }
             }
    }

  5. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    612
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    If the scope it is lost in the second function, you are passing it wrong in the first function probable.
    Specify the right scope when call the proxy method with a callback inside the first function.

    Also check if the first function has the expected scope.

    If you can show some code I could guide you better.

  6. #5
    Sencha User
    Join Date
    Jan 2013
    Location
    Salvador, Bahia - Brazil
    Posts
    21
    Vote Rating
    0
    luciano.lima is on a distinguished road

      0  

    Default


    Thank's bluehipp.

    Here is my code in controller (see the comments):

    Code:
    Ext.define('MyApp.controller.Login', {
        extend: 'Ext.app.Controller',
        config: {
        },
        firstFunction: function (formValues) {
            // "this" returns the controller
            MyApp.util.Proxy.init({
                method: 'connect.api.getuserkey',
                model: 'MyApp.model.Login',
                params :{
                    username: formValues.username
                },
                // Here is the callback function from the controller
                callback: this.connectSaveUserKey,
                maskViewport: true
            });
            // Trying to maintain the scope
            MyApp.util.Proxy.request(me);
            var continueData = {
                data: formValues,
                returnView: {xtype: 'connectgroupscontainer'}
            }
            // Another callback function from the controller
            MyApp.util.Proxy.continue(this.secondFunction, continueData);
        },
        connectSaveUserKey: function (response) {
            MyApp.app.userKey = response.hash_key;
        },
        secondFunction: function (data) {
            // Here "this" returns window object instead controller
            if (Ext.isEmpty(MyApp.app.userKey)) {
                Ext.Msg.alert(
                    MyApp.util.Config.getErrorIdentifier('connect.api.getuserkey'),
                    'User key not found!'
                );
                return;
            }
            var userData = data.data,
                returnView = data.returnView || null,
                stringToCrypt = Ext.JSON.encode(userData),
                encryptedFormValues = MyApp.app.crypt(MyApp.app.userKey, stringToCrypt);
    
    
            encryptedFormValues = btoa(encryptedFormValues);
            MyApp.util.Proxy.init({
                method: 'connect.api.getauthtoken',
                model: 'MyApp.model.Login',
                params :{
                    username: userData.username,
                    userdata: encryptedFormValues
                },
                // This callback is undefined
                callback: this.connectSaveAuthToken,
                maskViewport: true
            });
            if (!Ext.isEmpty(returnView)) {
                // MyApp.util.Proxy.setReturnView(returnView);
            }
            MyApp.util.Proxy.request(me);
            MyApp.util.Proxy.continue();
        },
        connectSaveAuthToken: function (response, params) {
            var me = MyApp.app.getController('Login'),
                configStore = Ext.getStore('Config'),
                configModel, view;
            
            configModel = Ext.create('MyApp.model.Config', {
                id: 1,
                auth_token: null,
                username: null,
                userdata: null
            });
            if (configStore.getCount() > 0) {
                configModel = configStore.first();
            } else {
                configStore.add(configModel);
            }
            configModel.set('auth_token', response.token);
            configModel.set('username', params.username);
            configModel.set('userdata', params.userdata);
            configModel.save();
            configStore.sync();
            console.log(configModel);
            return;
        },
        connectLogout: function () {
            var configStore = Ext.getStore('Config'),
                configModel = configStore.first(),
                view;
            configModel.resetModel();
            configStore.sync();
    
    
            view = Ext.Viewport.add({xtype: 'connectloginform'});
            Ext.Viewport.setActiveItem(view);
        },
        loadGroupsContainer: function () {
            view = Ext.Viewport.add({xtype: 'connectgroupscontainer'});
            Ext.Viewport.animateActiveItem(view, MyApp.app.slideLeftTransition);
            Ext.Viewport.setMasked(false);
        }
    });
    How I can set the correct scope? I do this in the controller or in my proxy?!

    Quote Originally Posted by bluehipy View Post
    If the scope it is lost in the second function, you are passing it wrong in the first function probable.
    Specify the right scope when call the proxy method with a callback inside the first function.

    Also check if the first function has the expected scope.

    If you can show some code I could guide you better.

  7. #6
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    612
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    I don t see where the first function is called but:

    callback: this.connectSaveUserKey,


    should be

    var self = this;
    ....

    callback: function(){ self.connectSaveUserKey(); }


    or

    callback: Ext.bind( this.connectSaveUserKey, this);


    these both should work fine IF the first function is called in the controller's scope.

  8. #7
    Sencha User
    Join Date
    Jan 2013
    Location
    Salvador, Bahia - Brazil
    Posts
    21
    Vote Rating
    0
    luciano.lima is on a distinguished road

      0  

    Default


    Bluehipy, the firstFunction is called through an event listener in the control option in the config (I remove it when paste code here).

    Thank's! The Ext.bind() solution works for me!

    Quote Originally Posted by bluehipy View Post
    I don t see where the first function is called but:

    callback: this.connectSaveUserKey,


    should be

    var self = this;
    ....

    callback: function(){ self.connectSaveUserKey(); }


    or

    callback: Ext.bind( this.connectSaveUserKey, this);


    these both should work fine IF the first function is called in the controller's scope.