How to capture ENTER and ESC key to submit form

[venu]

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: [
            this.label
	],
	
        keys: [{
                key: [Ext.EventObject.ESC], fn: function(){
		    Ext.getCmp('id_AddItemWindow_onCancel').fireEvent('click');
                }
            },{
                key: [Ext.EventObject.ENTER], fn: function(){
                    Ext.ComponentMgr.get('id_AddItemWindow_onAdd').fireEvent('click');
                }
        }]
    });
	
	this.items = [this.formPanel];
	
	AddItemWindow.superclass.constructor.call(this, {
		id		: 'id_addItemWindow',
		title	: ' New Item',
		width	: 380,
		height	: 300,
		closeAction: 'hide',

		buttons:[{
		   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????
				this.onAdd
			}
		  }
        },{
		  id: 'id_AddItemWindow_onCancel',
                  text: 'Cancel',
                  handler: this.hide.createDelegate(this, []),
		  listeners : {
			click : function() {
				Ext.getCmp('id_addItemWindow').hide();
			}
		  }
        }]
       });
	
};

Ext.extend(AddItemWindow, Ext.Window, {
	
	onAdd: function() {
		if(this.formPanel.getForm().isValid()){	
			this.formPanel.getForm().getEl().dom.action = this.formPanel.url;
			this.formPanel.el.mask("Please wait while saving the data", "x-mask-loading");
				this.formPanel.form.submit({
					failure: this.submitFailed,
					success: this.submitSuccessful,
					scope: this
			});
		} 
    },
	
	submitSuccessful: function(form, action) {	
		this.hide();
    },
	
	submitFailed: function(form, action) {
		Ext.MessageBox.alert('Error',action.result.message);
	},
});

Can anyone correct my code?

[Animal]

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
            });
        }

        if(!this.standardSubmit){
//          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);
        }
        this.el.addClass('x-form');
    }
});

[Animal]

ESC is not standard to submit forms. I don't think that's a good UI design.

[steffenk]

He wanted to use ESC for cancel, which is common behaviour. But what does cancel means in Form, reset?

[venu]

In my application, cancel means hide or close the Window that contains the FormPanel.

[Animal]

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)

[fwhitlock]

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?

[Animal]

Looks like IE just doesn't process the enter key as activating a submit input.

[Air_Mike]

Hi,

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.

[Animal]

Good catch there. I'll update the FR to just use negative offsets rather than that class.