AccessKeys (Global keymap)

[tof]

Here is a simple example of a global access keymap.

Here, "Alt-S" will focus the "Search" text field :


var globalKeyMap = new Ext.KeyMap(document);
globalKeyMap.accessKey = function(key, handler, scope) {
var h = function(n, e) {
e.preventDefault();
handler.call(scope || this, n, e);
};
this.on(key, h, scope);
};

var f = new Ext.form.FormPanel({
/* ... */
items : {
xtype:"textfield",
name:"keyword",
fieldLabel:"Search",
listeners:{
"render":function() {
globalKeyMap.accessKey({key:'s',alt:true}, this.focus, this);
}
}
}
});

Of course, the globalKeyMap can be a propery of an object, but must stay accessible as global.
The objective of "accessKey" is simply to wrap the handler of the keymap to "preventDefault" the event.

[Ytorres]

Thanks tof for this very useful example ;)

[vlados]

How can I integrate it in grid and make it to refresh the grid on F5, not the page? Is it possible?

[garraS]

How can I integrate it in grid and make it to refresh the grid on F5, not the page? Is it possible?

I think that it is not possible 8-|

[Makor]

globalKeyMap.accessKey = function(key, handler, scope) {
var h = function(n, e) {
e.preventDefault();
handler.call(scope || this, n, e);
};
this.on(key, h, scope);
};
globalKeyMap.accessKey({key:116}, function(){alert("test")}, Ext.getBody());


Why not? This exmple on press F5 show alert dialog :)

UPD: But in IE preventDefault not work :( And after alert make refresh page...

[sergiu079]

I am trying the same for F1. In Firefox it works, but in IE the IE help pops-up. Anyone any ideas? Can we kill the event before it reaches to IE?

[TommyMaintz]

Im not sure but have you tried returning false like this:



var globalKeyMap = new Ext.KeyMap(document);
globalKeyMap.accessKey = function(key, handler, scope) {
var h = function(n, e) {
e.preventDefault();
handler.call(scope || this, n, e);
return false;
};

this.on(key, h, scope);
};


Edit: Nope, doesnt work... ;)

Edit 2: After some research I came to believe that it is impossible to stop the browser event in IE for the keys F3, F5, Alt-Tab, Alt-F4.

You can capture the F1 event though using document.onhelp which is an special IE only event.

[mystix]

i used this to disable the F5 key in IE6 (didn't manage to test it on IE7):


// disable F5 key in IE6 (doesn't work in Safari 3.2)
new Ext.KeyMap(document, {
key: Ext.EventObject.F5,
fn: function(keycode, e) {
if (Ext.isIE) {
// IE6 doesn't allow cancellation of the F5 key,
// so trick it into thinking some other key was pressed (backspace in this case)
e.browserEvent.keyCode = 8;
}
e.stopEvent();
}
});

the basic idea is to fool IE (yes, IE is foolish indeed...) into thinking some other key was pressed.

[watrboy00]

mystix -

that pretty ingenious! lol. good tip.

[jofelrup]

Use this example by replacing the "alt + s" in the "Enter" key. My goal is to send the form by pressing Enter if the cursor is in the last field. But if ever you run no matter where this focus. Even if no form item is selected. I guess it is because it is applied to "document".


var globalKeyMap = new Ext.KeyMap(document); If I have my form like this:


var formPanel = new Ext.form.FormPanel({ ... How do I run it only when the focus is on some element of the form? In version 1.x is enough with this:



new Ext.KeyMap(Ext.get("myForm"), {
key: 13,
fn: function(e){
myForm.submit({
waitMsg:'Autentificando datos de usuario...',
reset:true,
success: ajax.success,
failure: ajax.failure
});
},
stopEvent:true
});
But with version 2.x does not work. I need it to run when the focus is on form with version 2.1 of ExtJS.


Thank you.

[andryi]

thanks tof, I could understand this topic:D

[tof]

You're welcome ;)