It’s a shame that such a powerful framework as ExtJs 4 does not have this feature built-in.
function submitOnEnter(field, event) {
if (event.getKey() == event.ENTER) {
field.up('form').getForm().submit();
}
}
var form = Ext.create('Ext.form.Panel', {
...
defaults: {
...
listeners: {
specialkey: submitOnEnter
}
},
submit: function() {
// Your submit code
}
});
The above code automatically adds the listener to every field in the form. Alternatively you may do it yourself:
items: [{
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
maxLength: 64,
allowBlank: false,
listeners: {
specialkey: submitOnEnter
}
}]
hello thanks for posting
It would be too powerful if it did.
That’s why I hate ExtJS. HTML native forms does this automatically, while in ExtJS you should write code, and a pretty dirty code.
Don’t hate it! Tell me what will you do if you want to stop auto submit behavior in Html pure forms? you need to write some JS codes to stop it. In lots of usages (especially in enterprise applications) you don’t need this auto-submit behavior.
It works man, save my time! Now I didn’t need to put listeners in every field.
function submitOnEnter(field, event) {
if (event.getCharCode() == Ext.EventObject.ENTER) {
var myBtn = Ext.getCmp(‘search_button’);
myBtn.fireEvent(‘click’, myBtn);
}
}
and in panel
{
xtype: ‘combo’,
fieldLabel: ‘My Label’,
name: ‘status’,
store: ‘MyDropdownStore’,
displayField: ‘label’,
valueField: ‘id’,
editable: false,
listeners: {
specialkey: submitOnEnter
}
},
You’re right; it must be a built-in feature.. By the way another solution for who uses MVC architecture is adding listener to all textfields in the form using query manager.
this.control({
‘myform textfield’: {
specialkey: function (field, e) {
if (e.getKey() == e.ENTER) {
field.up(‘form’).getForm().submit();
}
}
}
});