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

1
votes

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.

2
javascriptextjsextjs4extjs4.1

2 Answers

0
votes

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)

0
votes

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