This is the short post that I want to share, cause last year I had created form in Extjs and submitted using ENTER key event so I want to share that here the simple code in Extjs form to enabling ENTER key event, but using this code your mouse cursor should be focused on one of the field inside the form, this is very simple so I don’t think I need to provide the downloadable source code, here it goes:
Ext.onReady(function(){
var formLogin = new Ext.FormPanel({
frame: false, border: false, buttonAlign: 'center',
url: BASE_URL + 'user/extjs_login', method: 'POST',
id: 'frmLogin',
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
id:'fldusername',
name: 'username',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Password',
id:'fldpassword',
name: 'password',
allowBlank: false,
inputType: 'password'
}],
buttons: [
{ text: 'Login' },
{ text: 'Reset', handler: function() {
formLogin.getForm().reset();
}
}
],
keys: [
{ key: [Ext.EventObject.ENTER], handler: function() {
Ext.Msg.alert("Alert","Enter Key Event !");
}
}
]
});
var winLogin = new Ext.Window({
title: 'Extjs Enter Key Event', layout: 'fit',
width: 340, height: 140, resizable: false,
closable: false, items: [formLogin]
});
winLogin.show();
});
As you can see on the code above just add the config "keys" property and use the event key "Ext.EventObject.ENTER", that's all.
I must say that this post is just very much ok. Not too much text, clear and it’s working fine. I have included the principle in my program and thanks to you I saved quite some time. Keep up writing, I keep up reading.
hey thanks for stopping by, glad it worked for you
Clear and to the point! Thank you!
Thanks, it helped me.
you’re welcome
Thanks for the post. It helps…..
Thanks, this worked perfect. I do have one question..How can you silence the enter key event?
why don’t just delete the function handler
So great, it fine all except the Reset button, when i click reset button, it don’t run reset function, it only run handler for event key. Can you help me? thanks
owh really? do you get any error?, cause mine, it seems work fine
thank you for posting it.
it works!
Works like a charm. Great post. Thanks!
thanks man
I have a problem, in your example, the enter works perfect , pero when i click the button with mouse nothing happen.
my worst problem is when i add one handler in buttons section, when i navigate using tab and place the focus in save button and press enter two records are created.
why did happen this?
yes I experience the same problem too, it seem when the focus submit button, both event are called the button handler, and the enter key event, maybe removeHandler or addListener can be used to bind and unbind event
Very thanks, it helped me.
Thanks for sharing the stuff, the post is simple and clear. But when I am using it with ExtJS 4 then its unfortunately not working.
Does this not work with ExtJS 4? I checked the API and found that there is nothing as ‘keys’ existing there.
Has this been called off? Any clues? Thanks in advance for any help.
Thank you for this post..saved time.