Sencha Touch: Enter key to submit form

Question

I have a Sencha Touch code base and I wanted to be able to use the "Enter" key to submit the initial log in to the application instead of having to click the button on a desktop. Here is my Login view:

Ext.define('App.view.Login', {
    extend: 'Ext.form.Panel',
    alias: 'widget.login',

    requires:[
        'Ext.form.FieldSet',
        'Ext.field.Email',
        'Ext.field.Password'
    ],

    config: {
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'App'
            },
            {
                xtype: 'fieldset',
                margin: '.5em .5em 1.5em',
                title: 'Login',
                items: [
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        placeHolder: '[email protected]',
                        required: true
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        placeHolder: 'password',
                        required: true,
                    }
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'vbox'
                },
                margin: '10px',
                items:[
                    {
                        xtype: 'button',
                        margin: '10px',
                        itemId: 'login',
                        text: 'Login'
                    }
                ]
            }
        ]
    }
});

And here is my Login controller:

Ext.define("App.controller.Login", {
    extend: "Ext.app.Controller",
    config: {
        views: ["Login", "user.Home"],
        stores: ["LoginInstance"],
        refs: {
            password: 'passwordfield[name="password"]',

            login: {
                autoCreate: true,
                selector: "login",
                xtype: "login"
            }
        },
        control: {
            password: {
                keyup: function(field, e) {
                    if(e.event.keyCode === 13) {
                        console.log('Do login');
                        this.onLoginTap();
                    }
                }
            },
            "login #login": {
                tap: "onLoginTap"
            },

            // ...

        }
    },

    onLoginTap: function() { ... } // do the login

However, this seems to not do anything (that is, not even the console.log appears in the console!). Does anyone have have suggestion as to what I could be doing wrong?

Answer 1

It looks like there's more than one issue in your code.

• control doesn't target your password field. The key password references an component with xtype password. The correct way to reference it is either passwordfield if you never have more than one of them or 'passwordfield[name="password"]'.

• the purpose of refs is to create a method of the controller like this.getPassword() to get the password field. Also the way you define it is invalid. It must be like refs: [{ref: 'password', selector: 'passwordfield[name="password"]'

• you must not nest configurations inside a config property. extend: "Ext.app.Controller", config: { views: should be extend: "Ext.app.Controller", views:

I don't think this is exhaustive. There must be more issues.

Please read the documentation and don't try to code by trial and error. It is not a good programming practice.