PDA

View Full Version : What is required for a KeyMap event to fire?



FoxMulder900
24 May 2013, 6:32 AM
I have a tabpanel and I want each tab to have their own set of keyboard shortcuts. I set up a KeyMap in the afterrender function of each tab like so:


listeners: {
afterrender: function(){
new Ext.util.KeyMap({
target: this.getEl(),
binding: [{
key: 'c',
ctrl: true,
fn: function(key, e){
console.log('key pressed!');
}
}]
});
},
activate: function(){
this.focus();
}
}


This works fine except it requires the user to click somewhere in the tab before the keyboard shortcuts work. I thought maybe the panel had to be focused first so I added the activate listener and called .focus() but that had no effect.

Is there any way to activate the KeyMap without forcing the user to click somewhere in the tab first?

slemmon
28 May 2013, 11:02 AM
The following seemed to work for me ok with 4.2.1. I just added the this.focus() at the end of the afterrender event handler's code from your example.



Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}],
listeners: {
afterrender: function () {
new Ext.util.KeyMap({
target: this.getEl(),
binding: [{
key: 'c',
ctrl: true,
fn: function (key, e) {
console.log('key pressed!');
}
}
]
});
this.focus();
},
activate: function () {
this.focus();
}
}
});