Extjs KeyMap doesn't act on defaultEventAction but performs the default browser action

Question

Using ExtJS 4.1.1 even though in Ext.util.KeyMap i have set the defaultEventAction: 'preventDefault' and in the fn : function also i have set the e.preventDefault(); still it opens the new tab in chrome? I just want the field to perform the action fn the keys are implemented for and not the default browser action of opening the new tab. How is this possible?

    Ext.onReady(function () {

    var bcTextField = Ext.create('Ext.form.Text', {
        xtype: 'textfield',
        renderTo: 'console-output',
        emptyText: 'Enter Barcode/Accession Number',
        width: 200,
        margin: '0'
    });
    var map = new Ext.util.KeyMap({
        target: bcTextField.getEl(),
        binding: [{
            key: "t",
            ctrl: true,
            scope: this,
            defaultEventAction: 'preventDefault',
            fn: function (key, e) {
                e.preventDefault();
                alert('Ctrl + t was pressed.');
            }
        }]
    });
});

Any kind of help is appreciated.

score 0 · Accepted Answer · edited May 23 '17 at 11:48

0

Check the answer by Omnosis in this thread.. A detailed description about capturing such events is given. Hope it helps.

javascript capture browser shortcuts (ctrl+t/n/w)

edited May 23 '17 at 11:48

Community

1
1

answered Aug 13 '12 at 14:07

jssridhar

458
4
10

score 0 · Answer 2 · answered Aug 13 '12 at 14:22

0

You need e.stopEvent();

This is what we use:

var map = new Ext.util.KeyMap({
    target: Ext.getBody(),
    binding: [{
        key: Ext.EventObject.F,
        ctrl: true,
        fn: function (key, e) {
            e.stopEvent(); //This stops the default behaviour ;-)
            //logic here...
        }
    }],
    scope: me
});

answered Aug 13 '12 at 14:22

Johan Haest

4,391
28
37

Well i tried to use the key T, `key: Ext.EventObject.T, ctrl: true, fn: function (key, e) { e.stopEvent(); //This stops the default behaviour ;-) //logic here... alert('Ctrl + t was pressed.'); }` It opens the new tab of browser, which i don't wont. – nilesh Aug 13 '12 at 15:23
It is intresting that if you use alert instead of console.log the event.preventDefault() not works, and opens a new tab. – nilesh Aug 13 '12 at 15:38
yes, have the same problem, key: Ext.EventObject.T, ctrl:true, shift:true. And it still fires Chrome default behavior. Any working solution to this problem? – antohoho May 22 '14 at 18:29

Extjs KeyMap doesn't act on defaultEventAction but performs the default browser action

2 Answers2