mousedown / mouseup events on ExtJS 4 buttons

Question

I'm trying to make a button fire the mousedown and mouseup events on ExtJS 4, but I cannot find a properly way to do this.

I was trying to do something like this on my controller:

init: function()
{
    this.control(
    {
       'button[itemId="pttButton"]': 
       {
          mousedown: doSomething,
          mouseUp:   doSomethingElse
       }
    });
}

but these events don't seem to exist.

What's the best way to do this other than access directly the dom and using native Javascript events?

Answer 1

Because button does not have mousedown and mouseup events, easiest way is to add listeners for this events on the button component's element. Element which representing component you can get by component's getEl() method.

    var btn = Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody()

    });

    btn.mon(btn.getEl(), {
        mousedown: function() {
            console.log('down');
        },
        mouseup: function() {
            console.log('up');
        }
    });