ExtJS 4-从动画侦听器调用javascript类方法失败

我有一个控制器，它正在视图上运行一些动画。动画完成后，我需要在控制器上执行一个方法（称为

goToMainApp

）。我的动画完整监听器被调用——没有问题……但是方法调用失败。这是控制器：

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 : .....
        });
    }
});

---

我想我的问题是调用

this.goToMainApp（）时的
this

是动画对象而不是控制器…但我不确定如何修复它。

只需将作用域添加到侦听器：

scope: this

文档中的示例：

        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 : .....
        });

---

只需将作用域添加到侦听器：

scope: this

文档中的示例：

        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 : .....
        });

---

您是否尝试过检查回调函数中的作用域，它是什么？您还可以使用另一个技巧：var me=this；上面的submit（）和set scope:meIn the inspector说，

这个

现在是表单，当我运行

淡出时，我在它的成功处理程序中。因此，我们越来越接近了。您还需要指定提交回调的作用域。另外，执行me=this并设置作用域也没有意义，因为您已经通过me变量引用了控制器。你们都是对的。德布林的诡计奏效了。然而，埃文的两个观点都是正确的。我需要添加一个额外的作用域：这是表单的成功处理程序……我这样做了，而且效果很好。我将编辑您的答案以显示我所做的，然后接受它。您是否尝试过在回调函数中检查范围，它是什么？您还可以使用另一个技巧：var me=this；上面的submit（）和set scope:meIn the inspector说，
这个
现在是表单，当我运行
淡出时，我在它的成功处理程序中。因此，我们越来越接近了。您还需要指定提交回调的作用域。另外，执行me=this并设置作用域也没有意义，因为您已经通过me变量引用了控制器。你们都是对的。德布林的诡计奏效了。然而，埃文的两个观点都是正确的。我需要添加一个额外的作用域：这是表单的成功处理程序……我这样做了，而且效果很好。我将编辑您的答案，以显示我所做的，然后接受它。