Form submit on Enter

[philance]

Bros,

In Extjs 4, the Enter key to submit form that used to work in extjs 3 is no longer working.

keys: [{ key: Ext.EventObject.ENTER, fn: onSubmit }],

I read through the API documentation and try to google but cannot find the solution. Please help.

[bhutten]

I couldn't get the "keys" config to work in Ex4 either. This works, though - in "afterRender" :

    this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
      enter: this.onSubmitButton,
      scope: this
    });

[rrandymeyer]

Was there a solution for capturing the Enter key? I am trying to implement this in the login example where I would like the enter key to submit the form. Is the "afterRender" event on the form?

Thank you.

[rrandymeyer]

I implemented it this way according to another post. For each field I added a listener:

            listeners: {
                specialkey: function(field, e){
                    if (e.getKey() == e.ENTER) {
                        submitLogin();
                    }
                }
            },

The submitLogin() call is the same one the login button calls.

[pauk960]

Or, if you use MVC architecture in your application you can add this code to your controller

init: function() {
    
        this.control({
        'textfield': {
        specialkey: function(field, e) {
            if(e.getKey() == e.ENTER) {
                        field.up('form').getForm().submit();
            }
        }
        }
        });
} 

[Tim Dudek]

listeners: {
specialkey: function(field, e){
if (e.getKey() == e.ENTER) {
submitLogin();
}
}
},

This worked for me. Thanks

[TiloS]

In each field - isn't it horrible?

This works with the form and fnLogin as login function:

listeners: {
            afterRender: function(thisForm, options){
                this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                    enter: fnLogin,
                    scope: this
                });
            }
}

[dpaquin]

I use the defaults property of the form to apply that single listener to all the fields (without having to write it out each time)

[osnoek]

listeners: {
    afterRender: function(thisForm, options){
        this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {                    
            enter: fnLogin,
            scope: this
        });
    }
} 

Excellent! this works like a charm. Much nicer than handling it on a per-field basis

[mohaskuar]

i think this is the best way ...i having a problem on my submitLogin(); function be cause my login function accepts a button as an angument
submitLogin(button);........so how can i pass any button?on a key press