By Alvin Alexander. Last updated: September 20, 2016
Sencha ExtJS FAQ: How do I enable the use of the [Enter] key in a form textfield?
To let users hit the [Enter] key to submit a Sencha ExtJS form, I followed the example from the excellent book, Mastering ExtJS. First, I add this code to the this.control
block of my form controller:
// in the controller "this.control" block 'researchLinkForm textfield': { specialkey: this.onTextfieldSpecialKey },
Then I add this function in the same controller:
// handle 'Enter' key in textfields of the form. // not really useful on this form, but i wanted to test it. onTextfieldSpecialKey: function(field, event, options) { if (event.getKey() == event.ENTER) { var saveBtn = field.up('researchLinkForm').down('button#save'); saveBtn.fireEvent('click', saveBtn, event, options); } },
As you might guess from looking at that code, my form is named ResearchLinkForm
, and the name of the itemId
and iconCls
of the form submit button is save
. (You may be able to use submit
instead of save
, I don’t know, I didn’t try that, and just thought of it.)
The “secret sauce” of this recipe is knowing about the Sencha specialkey
event, and then knowing how to work with your form once you’ve captured that event.