View Full Version : How to capture ENTER and ESC key to submit form

24 Aug 2009, 1:09 AM
I am trying to capture ENTER and ESC keys in FormPanel to Submit / Cancel the form.
'ESC' is working fine, but when i click on 'ENTER' button, the browser is refreshing instead invoking the method called in the click event of the button. Highlighted the related code in RED color.

Here is my code

AddItemWindow = function() {

this.label = new Ext.form.TextField({
id : 'id_AddItemWindow_label',
name : 'label',
width : 200,
maxLength : 25,
fieldLabel : 'Label',
invalidText :'Label is mandatory',
tabIndex : 1,
enableKeyEvents: true,
scope: this

this.formPanel = new Ext.form.FormPanel({
method : 'POST',
baseCls: 'x-plain',
labelWidth: 130,
width : 330,
url: hostaddress+'/addItem.rap',
onSubmit: Ext.emptyFn,
items: [

keys: [{
key: [Ext.EventObject.ESC], fn: function(){
key: [Ext.EventObject.ENTER], fn: function(){

this.items = [this.formPanel];

AddItemWindow.superclass.constructor.call(this, {
id : 'id_addItemWindow',
title : ' New Item',
width : 380,
height : 300,
closeAction: 'hide',

id: 'id_AddItemWindow_onAdd',
text : 'Save & Close',
handler : this.onAdd,
scope : this,
listeners: {
click: function(field, e) {
// the below method is not called for ENTER key????
id: 'id_AddItemWindow_onCancel',
text: 'Cancel',
handler: this.hide.createDelegate(this, []),
listeners : {
click : function() {


Ext.extend(AddItemWindow, Ext.Window, {

onAdd: function() {
this.formPanel.getForm().getEl().dom.action = this.formPanel.url;
this.formPanel.el.mask("Please wait while saving the data", "x-mask-loading");
failure: this.submitFailed,
success: this.submitSuccessful,
scope: this

submitSuccessful: function(form, action) {

submitFailed: function(form, action) {

Can anyone correct my code?

24 Aug 2009, 1:47 AM
I've had a Feature Request out for a submitOnEnter config option for a FormPanel for a while now. It's such a common requirement, I don't know when they don't add it.

Here's the fix:

Ext.override(Ext.form.BasicForm, {
* @cfg {Object/Boolean} submitOnEnter
* If set, this causes the form to be submitted when the Enter key is pressed when an item
* of this form is focused. If the value of the <code>submitOnEnter</code> config is an object,
* it is passed as the options parameter to the {@link #submit} method.

initEl : function(el){
this.el = Ext.get(el);
this.id = this.el.id || Ext.id();

// If submitOnEnter wanted, add a non-focussable <input type="submit">
if (this.submitOnEnter) {
this.submitInput = this.el.createChild({
tag: 'input',
type: 'submit',
cls: 'x-hide-offsets',
tabIndex: -1

// Trap the submit input and invoke the submit method
if (this.submitInput) {
this.submitInput.on("click", function() {
this.submit(Ext.isObject(this.submitOnEnter) ? this.submitOnEnter : undefined);
}, this);
this.el.on('submit', this.onSubmit, this);

24 Aug 2009, 1:49 AM
ESC is not standard to submit forms. I don't think that's a good UI design.

24 Aug 2009, 2:30 AM
He wanted to use ESC for cancel, which is common behaviour. But what does cancel means in Form, reset?

24 Aug 2009, 5:22 PM
In my application, cancel means hide or close the Window that contains the FormPanel.

24 Aug 2009, 9:07 PM
In my application, cancel means hide or close the Window that contains the FormPanel.

That's handled automatically by Ext. ESC closes the Window (close meaning whatever you set closeAction to)

16 Sep 2009, 4:33 AM
I have tried the solution Animal posted above and for me it works in firefox, chrome, and safari. I have not gotten it to work in IE 6,7, or 8. Before I dig into this does Animal or anyone else know what the problem is?

16 Sep 2009, 5:09 AM
Looks like IE just doesn't process the enter key as activating a submit input.

29 Oct 2009, 2:34 AM

this is great override, but it doesn't work on IE.

I found out that hidden input element (type submit) was given class x-hide-offsets which has property visibility: hidden. That property (for some unknown reason) influence IE in the way that it ignores that submit element.

I gave that element different class which doesn't have that property (all other properties are there like big negative offsets) and now it work in IE.

29 Oct 2009, 2:59 AM
Good catch there. I'll update the FR to just use negative offsets rather than that class.

2 Feb 2010, 11:00 PM
Hello all,
I have used following code. I wanted to submit the form on Enter key press so i captured the event and then fired 'click' event Submit button. Its is working in IE, FF.

,keys: [{ key: [13], fn: function()
Ext.getCmp('loginButton').fireEvent("click", Ext.getCmp('loginButton'));