我有以下形式截取 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.');
}
}
答案 0 :(得分:2)
这样的事可能有用。用这个替换处理程序。
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;
}
}