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

我意识到当我使用鼠标点击“登录”按钮时，onButton功能正常，button.up()会返回登录window。

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

问题是，{{1}}为什么给我一个不同的按钮参数？

Answer 1

您必须使用fireEvent函数：

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

myBtn.fireEvent('click', myBtn);

试一试。

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

Answer 3

使用：

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

Answer 4

更通用的方式：

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

在extjs 4.2.6上测试

干杯

Answer 5

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

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

ExtJs手动触发Click事件，按钮param与鼠标点击不同

5 个答案: