ExtJs manually firing Click event, button param is different from mouse click

Question

So, I have a login controller, you can click login with mouse or press Enter key, like this:

Ext.define(\'My.controller.Login\', {
    extend: \'Ext.app.Cont         


        

Answer 1

You must use the fireEvent function like that:

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

myBtn.fireEvent('click', myBtn);

Give it a try.

Answer 2

Use:

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

Answer 3

A more general way:

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

Tested on extjs 4.2.6

Cheers

Answer 4

this will call the handler function in your button, in my case it worked, due i override that button handler with additional functionality and parameters value changes...(extjs 4.1.1)

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

Answer 5

Because the button click event is a synthetic event fired by the framework. It passes along the button instance and an event object. fireEvent means "notify any subscribers that this event has happened, with these arguments", not "trigger a click event on the underlying button".

So you'd need to use:

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