Question

What I have tried:

    new Ext.util.KeyMap({
        target: 'search',
        eventName: 'itemkeydown',
        binding: [
            {
                key: Ext.EventObject.ESC,
                scope: this,
                fn: function() {
                    console.log('esc');
                },
                defaultEventAction: 'preventDefault'
            }
        ]
    });

where search is the id of the element. Though it doesn’t bind to the element – I pass focus to it, press ESCAPE and callback isn’t fired.

What have I missed?

PS: I also tried Ext.get('search') instead of search with the same results.

PPS: search element is not an ExtJS control, it is regular <input type="text" ...>

Answer 1

Here is my working code:

var map = new Ext.util.KeyMap({
    target: 'search',
    eventName: 'keydown', // changed from itemkeydown -> keydown
    binding: [{
            key: Ext.EventObject.ESC,
            scope: this,
            fn: function() {
                console.log('esc');
            },
            defaultEventAction: 'preventDefault'
        }
    ]
});

My HTML element is as follows:

<input type="text" id="search"/>

keydown seems to be the default value for eventName. The code will work without it. You could also get it working by using the 4.0 style:

var map = new Ext.util.KeyMap("search", {
    key: Ext.EventObject.ESC,
    handler: function() {
        console.log('esc');
    },
    scope: this,
    defaultEventAction: 'preventDefault'
});