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!

Answer 1

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:

1. 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);
   

2. 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.