Ext JS 4 – TextField and Enter event

We come across this often when developing new Ext JS applications with a login panel. How do you capture the ‘Enter’ keypress to authenticate.

Here is the code:

Ext.define('MyApp.view.MyContainer', {
    extend: 'Ext.container.Container',

    height: 250,
    width: 400,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Login',
		    listeners: {
	             	specialkey: function(f,e){
			    if (e.getKey() == e.ENTER) {
			        me.enterHandler();
			    }
		        }
	            }
                }
            ]
        });
        me.callParent(arguments);
    },
    enterHandler:function(){
        Ext.Msg.alert('Enter Pressed');
    }
});