ExtJs manualmente sparare evento Click, il pulsante param è diverso da clic del mouse

Question

Così, ho un controller di accesso, è possibile fare clic il login con il mouse o premere il tasto Invio, in questo modo:

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

    init: function(application) { 
     this.control({ 
      "#idLogin button": {click: this.onButton}, 
      "#idLogin form > *": {specialkey: this.onKey} 
     }); 
    }, 

    onButton: function(button, e, eOpts) { 
     var win = button.up('window'); // the login window 
     //do more stuff... 
    }, 

    onKey: function (field, el) { 
     if (el.getKey() == Ext.EventObject.ENTER) //ENTER key performs Login 
      Ext.getCmp('#idLogin button').fireEvent('click'); 
    } 
}); 

mi sono reso conto quando uso il mouse per fare clic sul pulsante Login, la funzione onButton funziona correttamente, button.up() mi restituisce l'accesso window.

Tuttavia, se ho premuto il tasto Invio e spara la funzione onKey fare fireEvent('click'), in questo caso i onButton incendi su ma parametro button NON lo stesso parametro button ricevuto quando si fa clic con il mouse! E questa volta, la funzione button.up() non è definita.

La domanda è: perché fireEvent('click') mi fornisce un parametro di pulsante diverso?

Answer 1

è necessario utilizzare la funzione di fireEvent così:

var myBtn = Ext.getCmp('#idLogin button'); 

myBtn.fireEvent('click', myBtn); 

fare un tentativo.

Answer 2

Poiché l'evento clic sul pulsante è un evento sintetico generato dal framework. Passa lungo l'istanza del pulsante e un oggetto evento. fireEvent significa "notifica agli abbonati che questo evento è accaduto, con questi argomenti", non "attiva un evento click sul pulsante sottostante".

Così avresti bisogno di usare:

button.fireEvent('click', button);

Tuttavia, questo non ha molto senso, sei solo l'aggiunta di un ulteriore livello di indirezione.

Perché non astratto fuori:

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

    init: function(application) { 
     this.control({ 
      "#idLogin button": {click: this.onButton}, 
      "#idLogin form > *": {specialkey: this.onKey} 
     }); 
    }, 

    onButton: function(button, e, eOpts) { 
     this.doWindowFoo(); 
    }, 

    onKey: function (field, el) { 
     if (el.getKey() == Ext.EventObject.ENTER) //ENTER key performs Login 
      this.doWindowFoo(); 
    }, 

    doWindowFoo: function() { 
     // Assumes the window has an id idLogin, there are several other ways to get a reference 
     var win = Ext.getCmp('idLogin'); 
    } 
}); 

Answer 3

Usa:

var button= Ext.getCmp('#idLogin button');  
button.fireHandler(); 

Answer 4

Un modo più generale:

document.querySelector("what-ever-el-selector").click(); 

Testato su ExtJS 4.2.6

Acclamazioni