View Full Version : Catching ENTER key in a model dialog using code in the controller?!

12 Mar 2012, 5:28 AM

I'm trying to catch the ENTER key in a modal dialog to process the data entered in its form fields and close the dialog. The problem is I'm kinda confused how to do this properly in the controller code. I have something like this:

Ext.define('MyApp.controller.Controller', {
[ ... ],
init: function() {
'panel button[id=add]': {
click: this.openAddDialog
[ ??? Where to put the handler code for the enter key?]

openAddDialog: function(button) {
if(!this.dialog) {
this.dialog = Ext.create('MyApp.view.AddDialog', {modal: true});

Now is there a way to define a control handler that works for the dynamic dialog? I suppose not as the component has not been created yet when the init function is called. So where do I have to add event handling code instead? I don't want to put it into the AddDialog view...


12 Mar 2012, 7:59 AM
The best place to do this is add a keyup event listener on the dialog's element and check to see if it's the enter key. If it is then fire an event on the dialog or handle what you need there.

13 Mar 2012, 12:53 AM
I found a solution but I'm not quite sure if this is what you suggested. I added the following to the control() function:

'#dialog textfield': {
specialkey: function(field, e) {
if(e.getKey() == e.ENTER) {
} else if(e.getKey() == e.ESC) {

First thing I don't understand is why this works for a dialog that is being created on demand but having said that I realize that all controls specified using the xtype convention are created only when needed so forget that question.

What I don't like about that solution is the binding to the textfield as there could be other possible field types inside the dialog. If I bind the specialkey event to the dialog only I get an error when showing the dialog the second time.