javascript ExtJs 手动触发 Click 事件，按钮参数与鼠标点击不同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16145882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJs manually firing Click event, button param is different from mouse click
提问by Tom
So, I have a login controller, you can click login with mouse or press Enter key, like this:
所以，我有一个登录控制器，您可以用鼠标单击登录或按 Enter 键，如下所示：
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');
}
});
I realised when I use the mouse to click the Login button, onButtonfunction works properly, button.up()returns me the Login window.
我意识到当我使用鼠标单击登录按钮时，onButton功能正常，button.up()返回给我登录window。
However, if I pressed Enter key and fires the onKeyfunction to do fireEvent('click'), in this case the onButtonfires up but parameter buttonNOT the same as the buttonparameter received when you click by mouse! And this time, button.up()function is undefined.
但是，如果我按下 Enter 键并触发onKey函数 do fireEvent('click')，在这种情况下onButton触发了但参数button与button您单击鼠标时收到的参数不同！而这一次，button.up()函数是未定义的。
Question is, why does fireEvent('click')give me a different button parameter?
问题是，为什么fireEvent('click')给我一个不同的按钮参数？
回答by Shlomo
You must use the fireEventfunction like that:
您必须使用这样的fireEvent功能：
var myBtn = Ext.getCmp('#idLogin button');
myBtn.fireEvent('click', myBtn);
Give it a try.
试一试。
回答by Evan Trimboli
Because the button click event is a synthetic event fired by the framework. It passes along the button instance and an event object. fireEventmeans "notify any subscribers that this event has happened, with these arguments", not "trigger a click event on the underlying button".
因为按钮点击事件是框架触发的合成事件。它传递按钮实例和事件对象。fireEvent意思是“用这些参数通知任何订阅者这个事件已经发生”，而不是“触发基础按钮上的点击事件”。
So you'd need to use:
所以你需要使用：
button.fireEvent('click', button);
button.fireEvent('click', button);
However, this doesn't really make sense, you're just adding an extra layer of indirection.
但是，这实际上没有意义，您只是添加了一个额外的间接层。
Why not abstract it out:
为什么不把它抽象出来：
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');
}
});
回答by kangaswad
Use:
利用：
var button= Ext.getCmp('#idLogin button');
button.fireHandler();
回答by AlessMascherpa
A more general way:
更通用的方法：
document.querySelector("what-ever-el-selector").click();
Tested on extjs 4.2.6
在 extjs 4.2.6 上测试
Cheers
干杯
