In an ExtJS form, how to disable input-as-submit only for textarea fields?

Question

I have the following view: it intercepts the ENTER key, so when the user is in the text field and presses ENTER , the form will be submitted , which works fine.

The problem is that when the user is in the textarea field, the event also fires, which is undesirable, because in this case the user just meant that ENTER should move the cursor down one line.

How to change the following code to allow the event handler to execute when the cursor is in any field other than the textarea field?

 var simple_form = new Ext.FormPanel({ labelWidth: 75, frame:true, style: 'margin: 10px', title: 'Simple Form', bodyStyle:'padding:5px 5px 0', width: 700, defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: 'Name', name: 'name' }, { fieldLabel: 'Description', name: 'description', xtype: 'textarea' } ], buttons: [{ text: 'Save', handler: function() { if(simple_form.getForm().isValid()){ simple_form.getForm().getEl().dom.action = 'save_form.php'; simple_form.getForm().getEl().dom.method = 'POST'; simple_form.getForm().submit({ success : function(form, action) { changeMenuItemInfoArea(start_info_panel2, 'Data was saved2, check file: output.txt (this is a new component)'); simple_form.hide(); } }) } else { Ext.Msg.minWidth = 360; Ext.Msg.alert('Invlaid Form', 'Some fields are invalid, please correct.'); } } },{ text: 'Cancel', handler: function(){ Ext.Msg.alert('Notice', 'Cancel was pressed.'); } }], keys: [ { key: [Ext.EventObject.ENTER], handler: function() { Ext.Msg.alert("Alert","(this will save the form)"); } } ] }); 

Adding

Thanks @Robby, this works, here is my code after I built in your solution:

 var simple_form = new Ext.FormPanel({ labelWidth: 75, frame:true, style: 'margin: 10px', title: 'Simple Form', bodyStyle:'padding:5px 5px 0', width: 700, defaults: {width: 230}, defaultType: 'textfield', items: [{ fieldLabel: 'Name', name: 'name' }, { fieldLabel: 'Description', name: 'description', xtype: 'textarea' } ], buttons: [{ text: 'Save', handler: save_the_form },{ text: 'Cancel', handler: function(){ Ext.Msg.alert('Notice', 'Cancel was pressed.'); } }], keys: [ { key: [Ext.EventObject.ENTER], handler: function(key, event) { var elem = event.getTarget(); var component = Ext.getCmp(elem.id); if(component instanceof Ext.form.TextArea) { return; } save_the_form(); } } ] }); function save_the_form() { if(simple_form.getForm().isValid()){ simple_form.getForm().getEl().dom.action = 'save_form.php'; simple_form.getForm().getEl().dom.method = 'POST'; simple_form.getForm().submit({ success : function(form, action) { changeMenuItemInfoArea(start_info_panel2, 'Data was saved2, check file: output.txt (this is a new component)'); simple_form.hide(); } }) } else { Ext.Msg.minWidth = 360; Ext.Msg.alert('Invlaid Form', 'Some fields are invalid, please correct.'); } } 

Answer 1

Something like this might work. Replace the handler with this.

 handler: function(key, event) { var elem = event.getTarget(); // get the element that the event targets var component = Ext.getCmp(elem.id); // get the Ext component by id if(component instanceof Ext.form.TextArea) { // if its a text area return return; } }