JS＆EXT JS：功能範圍誤會

Question

IM有一些麻煩，下面的代碼裏面功能：

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') 
    } 

} 

}); 

我希望能夠調用「enviarLogin」內部「crearLoginWindow」的功能，但它拋出一個參考錯誤。如果該函數放置在「crearLoginWindow」之外，它將起作用。

作爲這兩條線的麻煩來源：

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

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

我已經嘗試了不同的範圍變體，如;

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

這是合理的什麼我想我明白瞭解範圍以及需要指定的函數所在的執行它的地方。

標識欣賞一個解決方案，因爲這個問題讓我的代碼很凌亂！

Answer 1

簡單地定義另一個函數中的一個函數它不附加到任何物體或實例，所以this.enviarLogin將無法​​正常工作。有兩種基本選擇這裏：

1. 只要定義內的功能，你正在做的（你的處理程序分配上面移動它），然後按名稱直接引用它：

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

2. 定義enviarLogin的方法，要定義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') 
       } 
   
   }); 
   

如果您不需要在crearLoginWindow方法之外引用enviarLogin，則第一個版本可能會更好。如果您確實需要在其他地方參考enviarLogin，並且使用this中的enviarLogin更清晰，則第二種方法更好。