PDA

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



venu
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: [
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
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
});
}

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
24 Aug 2009, 1:49 AM
ESC is not standard to submit forms. I don't think that's a good UI design.

steffenk
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?

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

Animal
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)

fwhitlock
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?

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

Air_Mike
29 Oct 2009, 2:34 AM
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
29 Oct 2009, 2:59 AM
Good catch there. I'll update the FR to just use negative offsets rather than that class.

HemantK
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').focus();
Ext.getCmp('loginButton').fireEvent("click", Ext.getCmp('loginButton'));
}
}
]