7

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.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, onButton function works properly, button.up() returns me the Login window.

However, if I pressed Enter key and fires the onKey function to do fireEvent('click'), in this case the onButton fires up but parameter button NOT the same as the button parameter received when you click by mouse! And this time, button.up() function is undefined.

Question is, why does fireEvent('click') give me a different button parameter?

5 Answers 5

19

You must use the fireEvent function like that:

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

myBtn.fireEvent('click', myBtn);

Give it a try.

2
  • 1
    Thank you :D spot on and very fast@!
    – Tom
    Apr 22, 2013 at 11:30
  • why there is no button.click() ?
    – Geo
    Jul 19, 2013 at 19:31
8

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');
    }
});
5
  • Thank you very much for detailed answer! Indianer beat it by 60 seconds with a short one XD
    – Tom
    Apr 22, 2013 at 11:34
  • 2
    The answer is "wrong", you shouldn't be firing an event on the button. It is not the correct way to do it. Apr 22, 2013 at 11:37
  • EvanT, it is not nice to take the 'accept' back from him XD but i agree you have gone deeper into restructuring the functions in best practice. You have flatten down the layers. I wish I could give u 10+ Cheers!~
    – Tom
    Apr 22, 2013 at 11:50
  • 3
    I don't really care about the accepted answer, just pointing out that you shouldn't use that approach in your own code. Apr 22, 2013 at 12:06
  • how to do it with native js? May 23, 2016 at 15:22
4

Use:

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

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();
0

A more general way:

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

Tested on extjs 4.2.6

Cheers

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.