Question

I have a controller that is running some animation on a view. When the animation is complete, I need to execute a method (called goToMainApp) on my controller. My animation complete listener gets invoked — no problem there…but the method invocation fails. Here’s the controller:

Ext.define('LoginApp.controller.LoginController', {
    extend : 'Ext.app.Controller',

    config : ....
    init : ......

    goToMainApp : function() {
        console.log('Redirecting to main application');
        do important stuff here....;
    },

    tryLogin : function() {
        this.getCredentialsForm().submit({
            success : function(form, action) {
                console.log('login successful');

                // fade out the login form element
                var form = Ext.ComponentQuery.query("loginview")[0];
                form.getEl().fadeOut({
                    duration : 500,

                        listeners : {
                            afteranimate : function() {
                                console.log('login successful');  // WORKS!!!
                                this.goToMainApp();  // FAILS!!!
                            }
                    }
                });

            },
            failure : .....
        });
    }
});

I think my problem is that the this in my call to this.goToMainApp(); is the animation object and not the controller…but I am not sure how to fix it.

Answer 1

Just add scope to your listener:

scope: this

Example from docs:

        tryLogin : function() {
        this.getCredentialsForm().submit({
            scope : this,    // Sets scope of the form handler to the controller
            success : function(form, action) {
                console.log('login successful');

                // fade out the login form element
                var form = Ext.ComponentQuery.query("loginview")[0];
                form.getEl().fadeOut({
                    duration : 500,

                        listeners : {
                            scope : this, // Now also sets it to controller
                            afteranimate : function() {
                                console.log('login successful');  // WORKS!!!
                                this.goToMainApp();  // FAILS!!!
                            }
                    }
                });

            },
            failure : .....
        });