JS & EXT JS: function inside a function scope misunderstanding

Question

im having some trouble with the following code:

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

init: function() {
    ...
},

crearLoginWindow:function(){

    var loginWindow = Ext.create('Proto1.view.adminbd.LoginWindowBDView', {
        itemId: 'loginwindow',
        autoShow: true,
        modal: true
    });

    Ext.ComponentQuery.query('#loginwindow > button[text="Cancelar"]')[0].on('click', function(){loginWindow.close()});

    //Cant call 'enviarLogin' function if its inside 'crearLoginWindow'
    Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0].on('click', this.enviarLogin, this);

    var enviarLogin = function(){
        console.log('login')
    }

}

});

I want to be able to call 'enviarLogin' inside 'crearLoginWindow' function but it throws a reference error. If the function is placed outside 'crearLoginWindow' it will work.

Being these two lines the source of trouble:

Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0].on('click', this.enviarLogin, this);

var enviarLogin = function(){
    console.log('login')
}

I've tried different scope variants such as;

Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0].on('click', this.crearLoginWindow.enviarLogin);
this.enviarLogin = function(){
    console.log('login')
}

Which makes sense with what i think i understand about scope and the need to specify the place where the function resides to execute it.

Id appreciate a solution because this problem makes my code very messy!

score 1 · Accepted Answer · answered Oct 19 '11 at 18:38

Simply defining a function within another function doesn't attach it to any object or instance, so this.enviarLogin won't work. There are two basic options here:

Just define the inner function as you're doing (moving it up above your handler assignment), and reference it directly by name:

var enviarLogin = function(){
    console.log('login')
};

Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0]
    .on('click', enviarLogin);

Define enviarLogin as a method, the same way you are defining crearLoginWindow:

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

    init: function() { ... },

    crearLoginWindow: function(){
        // ...

        Ext.ComponentQuery.query('#loginwindow > button[text="Conectar"]')[0]
            .on('click', this.enviarLogin, this);
    },

    enviarLogin: function(){
        console.log('login')
    }

});

The first version may be better if you don't need to reference enviarLogin outside of the crearLoginWindow method. The second is better if you do need to reference enviarLogin elsewhere, and it makes using this in enviarLogin clearer.

Thanks, if theres no simple way to put the function below, option 1 seems the best solution to keep my code clearer for this matter. — vto, Oct 19 '11 at 20:55
You can use option one with the function definition below if you use a function declaration rather than a function expression: `function enviarLogin() {...}` - see [this related question](http://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname) — nrabinowitz, Oct 19 '11 at 20:59
Great, now i can put all the 'helpers' where i want and also i've noticed that the 'sub function' keeps being private to the 'function container'. — vto, Oct 20 '11 at 12:33

JS & EXT JS: function inside a function scope misunderstanding

1 Answers1