ExtJs bằng tay bắn sự kiện Click, nút param là khác nhau từ chuột nhấp

Question

Vì vậy, tôi có một bộ điều khiển đăng nhập, bạn có thể bấm vào đăng nhập bằng chuột hoặc bấm phím Enter, như thế này:

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

tôi nhận ra khi tôi sử dụng chuột để nhấp vào nút Đăng nhập, chức năng onButton hoạt động bình thường, button.up() trả về cho tôi Đăng nhập window.

Tuy nhiên, nếu tôi ép phím Enter và bắn các onKey chức năng để làm fireEvent('click'), trong trường hợp này onButton cháy lên nhưng tham số button KHÔNG giống như các tham số button nhận khi bạn nhấp chuột! Và lần này, hàm button.up() không xác định.

Câu hỏi là, tại sao fireEvent('click') cho tôi thông số nút khác?

Answer 1

Bạn phải sử dụng fireEvent chức năng như thế:

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

myBtn.fireEvent('click', myBtn); 

Hãy thử.

Answer 2

Vì sự kiện nhấp nút là sự kiện tổng hợp được kích hoạt bởi khung. Nó đi dọc theo thể hiện nút và một đối tượng sự kiện. fireEvent có nghĩa là "thông báo cho bất kỳ người đăng ký nào rằng sự kiện này đã xảy ra, với các đối số", không "kích hoạt sự kiện nhấp chuột vào nút cơ bản".

Vì vậy, bạn sẽ cần phải sử dụng:

button.fireEvent('click', button);

Tuy nhiên, điều này không thực sự có ý nghĩa, bạn chỉ cần thêm một lớp về mình.

Tại sao không trừu tượng nó ra:

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

Sử dụng:

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

Answer 4

Một cách tổng quát hơn:

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

Thử nghiệm trên ExtJS 4.2.6

Cheers