Lost scope in controller

[luciano.lima]

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)

[lkloeppel]

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

Example:

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

[luciano.lima]

This return window to var. I try this too.

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

Example:

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

[bluehipy]

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.

[luciano.lima]

Thank's bluehipp.

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

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

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.

[bluehipy]

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.

[luciano.lima]

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!

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.