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

时间:2012-12-04 15:45:30

标签: javascript class extjs scope

我有一个控制器在视图上运行一些动画。动画完成后,我需要在控制器上执行一个方法(称为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的调用this.goToMainApp();是动画对象而不是控制器...但我不知道如何解决它。

1 个答案:

答案 0 :(得分:3)

只需向听众添加范围:

scope: this

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