submit form on ENTER press int EXT js

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

For Sencha:

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

Answer 2

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 3

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 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
                });
            }
}