我有以下形式拦截ENTER键,以便当用户在文本框中并按ENTER键时,表单将被提交,这很好.

问题是,当用户处于textarea字段时,事件也会触发,这是不希望的,因为在这种情况下,用户只是意味着ENTER应该将光标向下移动一行.

如何更改以下代码以允许在光标位于textarea字段以外的任何字段时执行事件处理程序？

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

附录

谢谢@Robby,这是有效的,这是我构建你的解决方案后的代码：

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

最佳答案 这样的事可能有用.用这个替换处理程序.

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