Question

I have the following form which intercepts the ENTER key so that when the user is in a textbox and presses ENTER the form will be submitted, which works fine.

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

How can I change the following code to allow the event handler to execute when the cursor is in any field except a 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)");
            }
        }
    ]
});

Addendum

Thanks @Robby, that 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 may work. Replace 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;
    }
}