submit form on ENTER press int EXT js - extjs

Question

i am very new to EXT.js; i need to submit the form when ENTER is pressed below is my code but i dont know what to call in the listener of the password field here is my code:
ie:what is the function to call in the listener
<script type="text/javascript">
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.create("Ext.container.Viewport", {
layout: "border",
rtl: <spring:theme code='theme.rtl' text='false' />
});
Ext.create("Ext.window.Window", {
title: "<spring:message code='title.login' text='Login' />",
height: 310,
width: 450,
closable: false,
layout: "border",
items: [{
xtype: "panel",
border: false,
bodyCls: "login-header",
height: 160,
region: "north"
}, {
id: "<%=loginFormId%>",
url: "<spring:url value='/secure/auth'/>",
xtype: "form",
layout: "form",
region: "center",
bodyPadding: 10,
border: false,
buttons: [{
handler: function() {
var form = this.up("form").getForm();
if (form.isValid()) {
Ext.getCmp("<%=submitBtnId%>").disable();
form.standardSubmit = true;
form.method = "POST";
form.submit();
}
},
id: "<%=submitBtnId%>",
text: "<spring:message code='button.submit' text='Submit' />"
}, {
handler: function() {
var form = this.up("form").getForm();
form.reset();
},
id: "<%=clearBtnId%>",
text: "<spring:message code='button.clear' text='Clear' />"
}],
defaultType: "textfield",
defaults: {
msgTarget: "side",
labelWidth: 100
},
items: [{
fieldLabel: "<spring:message code='input.username' text='Username' />",
name: "selfcare_username"
}, {
fieldLabel: "<spring:message code='input.password' text='Password' />",
name: "selfcare_password",
enableKeyEvents:true,
inputType: "password",
listeners: {
scope: this,
specialkey: function(f, e) {
if (e.getKey() === e.ENTER) {
}
}
}
}]
}]
}).show();
<c:if test="${not empty param.error}">
var errorMsg = "<c:out value="${SPRING_SECURITY_LAST_EXCEPTION.message}" />";
if (errorMsg !== "") {
Ext.MessageBox.show({
title: "<spring:message code='title.error' text='Error' />",
msg: errorMsg,
closable: false,
buttons: Ext.Msg.OK
});
}
</c:if>
});
</script>

Answer 1

These days it is better to use the defaultButton property on the form to designate the default button on the form. This is the button who's handler will handle your ENTER key.:
http://docs.sencha.com/extjs/6.0/6.0.2-classic/#!/api/Ext.panel.Panel-cfg-defaultButton

Answer 2

You should attach key event of the components listener, here is the sample which is working if the field not empty and pressed key ENTER or TAB inside the field.
suppliers is a JsonStore where I am loading store by params which means you can call whatever you wrote in the app.
{
xtype: 'textfield',
id: 'supplier-id',
flex: 1,
tabIndex: 1,
fieldLabel: 'SUPPLIER NO',
fieldStyle: 'text-align: right; font-size: 12pt',
margins: '0 5 0 0',
enablekeyEvents: true,
listeners: {
specialkey: function (field, e) {
if (field.getValue() != 'null') {
if (e.getKey() === e.ENTER || e.TAB) {
suppliers.load({
params: {'supplier': field.getValue(), 'type': 'supplier'},
callback: function () {
Ext.getCmp('supplier-name').setValue(suppliers.data.items[0].data['MATCH_NAME']);
}
});
}
}
},
focus: function (e) {
e.setValue('');
Ext.getCmp('supplier-name').setValue("");
suppliers.loadData([], false);
}
}
}

Answer 3

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

Answer 4

Add listener with afterrender
listeners: {
afterRender: function(thisForm, options){
this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
enter: fnLogin,//give here to login function
scope: this
});
}
}