mousedown / mouseup events on ExtJS 4 buttons

dom-events, extjs, extjs4, javascript, mouseevent

Solution

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

Problem

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?

Original source