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

Question

所以，我有一个登录控制器，你可以用鼠标单击登录或按 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');
    }
});

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

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

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

score 17 · Accepted Answer

您必须使用这样的fireEvent功能：

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

myBtn.fireEvent('click', myBtn);

试试看。

score 7 · Accepted Answer

因为按钮点击事件是由框架触发的合成事件。它传递按钮实例和事件对象。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');
    }
});

score 4 · Accepted Answer

4

采用：

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

于 2013-11-04T09:33:43.997 回答

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

更通用的方法：

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

在 extjs 4.2.6 上测试

干杯

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

5 回答 5

Related

Reference