PDA

View Full Version : newbie question on keymap : a keymap put on a Field doesn't work



flamant
12 May 2011, 9:56 AM
Hi ,
I instanciate a textfield and on render event I instanciate a keymap put on this field

the field :



result = new Ext.form.TextField({
id: "I" + fieldId,
.........
listeners: {
render: function(field) {
applyKeyMapToField(field.getEl());
}
}
});


The keymap :



function applyKeyMapToField(elt) {
new Ext.KeyMap(elt,
{
key: 'A',
ctrl: true,
alt: true,
field: elt,
fn: function() {
alert('ca passe');
},
stopEvent: true
}

)
}


But for a reason I didn't find, when I type "ctrl alt A" while the focus is on the field the handler doesn't fire

Thank you in advance for your answers

kembuco
12 May 2011, 10:23 AM
I haven't tried it, and it might be just a hunch, but have you tried to use a lowercase a instead of an uppercase A? I wonder because you might be required to do a ctrl shift alt A for what you've written.

Maybe like this instead:

function applyKeyMapToField(elt) {
new Ext.KeyMap(elt,
{
key: 'a',
ctrl: true,
alt: true,
field: elt,
fn: function() {
alert('ca passe');
},
stopEvent: true
}

)
}

friend
12 May 2011, 10:40 AM
I'm not 100% certain about this, but if declaring a keymap directly on a field, you may have to set enableKeyEvents: true.

Regardless, here's (yet another) example of declaring a keymap inline. I use this in my FormPanel configs to enable submit on ENTER and cancel on ESC. Note that I have to manually check form validity, since use can still fire a button click in code, even if the form hasn't passed validation:



var form = new Ext.form.FormPanel({
frame: true,
// the ENTER key submits (if the form validates successfully).
keys: [{
key: [Ext.EventObject.ENTER], handler: function(keyCode, event) {
var button = form.buttons[0];
if (!form.getForm().isValid() || button.disabled) {
return;
}
button.handler.call( button, button.scope, Ext.EventObject);
}
},{
// ESC key cancels the edit.
key: [Ext.EventObject.ESC], handler: function(keyCode, event) {
var button = form.buttons[1];
button.handler.call( button, button.scope, Ext.EventObject);
}
}],
monitorValid: true,
padding: '5 5 5 5',
ref: 'form',
waitMsgTarget: true,
items: [{
<... some form fields ...>
}]
buttons: [{
formBind: true,
handler: saveRecord,
iconCls: 'iconSave',
text: 'Save'
},{
handler: function(button, event) {
window.hide();
},
iconCls: 'iconCancel',
text: 'Cancel'
}]
});

flamant
12 May 2011, 11:54 AM
Hi friend and kembuco,

I tried enableKeyEvents: true. and I replace the uppercase 'A' with the lower case 'a' and it worked.

Thanks again