PDA

View Full Version : [4.1] KeyMap for processing a form



zombeerose
23 Feb 2012, 3:38 PM
I am probably missing something simple but I can't seem to get a KeyMap to work in Ext 4.1. In this short example, I want to handle the Enter key when it is pressed. Any suggestions?




var form = Ext.create('Ext.form.Panel',{
items: [{
fieldLabel: 'First',
labelWidth: 40,
width: 160,
xtype: 'textfield'
},{
fieldLabel: 'Last',
labelWidth: 40,
width: 160,
xtype: 'textfield'
}],
renderTo: Ext.getBody()
});

var map = Ext.create('Ext.util.KeyMap',{
fn: function(key,e){
alert('It Fired');
form.fireEvent('some_event');
},
key: Ext.EventObject.ENTER,
target: form
});

fbchen
23 Feb 2012, 10:07 PM
Try this one:


form = Ext.create('Ext.form.Panel', {
keys: [{
key: Ext.EventObject.ENTER,
fn: function(){alert('It Fired');}
}],
listeners: {
render: function(p) {p.getKeyMap();}
},
......
});

zombeerose
24 Feb 2012, 8:28 AM
A slight problem ... the "keys" config can not be an array b/c the getKeyMap method applies the value directly to the config used for the KeyMap. Nothing in the constructor takes account for this. Therefore, the only option is for keys to be an object.

Option B would be to define the KeyMap explicitly during the render listener and specify the element of the component.



var form = Ext.create('Ext.form.Panel',{
...
listeners: {
'render': function(p){ p.getKeyMap(); }
},
keys: {
fn: function(key,e){
alert('Bam');
},
key: Ext.EventObject.ENTER
}
});