ExtJs手动触发Click事件，按钮参数与鼠标点击不同答案

【问题标题】：ExtJs manually firing Click event, button param is different from mouse clickExtJs手动触发Click事件，按钮参数与鼠标点击不同
【发布时间】：2013-04-15 06:46:46
【问题描述】：

所以，我有一个登录控制器，你可以用鼠标点击登录或回车键，像这样：

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

我意识到当我用鼠标点击登录按钮时，onButton 功能正常工作，button.up() 将登录返回给我window。

但是，如果我按下 Enter 键并触发 onKey 函数来执行 fireEvent('click')，在这种情况下，onButton 会触发，但参数 button 与单击时收到的 button 参数不同用鼠标！而这一次，button.up() 函数是未定义的。

问题是，为什么fireEvent('click') 给我一个不同的按钮参数？

【问题讨论】：

标签： javascript extjs

【解决方案1】：

你必须像这样使用fireEvent函数：

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

myBtn.fireEvent('click', myBtn);

试一试。

【讨论】：

谢谢 :D 非常快@！
为什么没有button.click()？

【解决方案2】：

因为按钮点击事件是由框架触发的合成事件。它传递按钮实例和事件对象。 fireEvent 表示“使用这些参数通知任何订阅者此事件已发生”，而不是“触发底层按钮上的点击事件”。

所以你需要使用：

button.fireEvent('click', button);

但是，这并没有什么意义，你只是添加了一个额外的间接层。

为什么不把它抽象出来：

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

【讨论】：

非常感谢您的详细解答！ Indianer 以 60 秒的优势击败了它，一记短杆 XD
答案是“错误的”，您不应该在按钮上触发事件。这不是正确的做法。
EvanT，从他那里收回“接受”并不好 XD，但我同意您已经深入研究了最佳实践中的功能重组。您已将图层压平。我希望我能给你 10+ 干杯！~
我并不真正关心接受的答案，只是指出您不应该在自己的代码中使用这种方法。
原生js怎么做？

【解决方案3】：

用途：

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

【讨论】：

"fireHandler" 是私有函数，不应依赖：docs.sencha.com/extjs/4.2.2/#!/api/…

【解决方案4】：

这将在您的按钮中调用处理程序函数，在我的情况下它起作用了，因为我使用附加功能和参数值更改覆盖了该按钮处理程序......（extjs 4.1.1）

Ext.getCmp('#idLogin button').handler();

【讨论】：

【解决方案5】：

更通用的方式：

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

在 extjs 4.2.6 上测试

干杯

【讨论】：