Sencha touch keyboard next button on xtype textfield

Question

Following is my Sencha code of a simple registration form:

xtype: 'fieldset',
items: [
    {
        name: 'name',
        id: 'rename',
        xtype: 'textfield',
        placeHolder: 'Name*',
        tabIndex: 1
    },
    {
        name: 'emailfield',
        id: 'reemailid',
        xtype: 'emailfield',
        placeHolder: 'email@example.com*',
        tabIndex: 2
    },
    {
        name: 'password',
        id: 'repassword',
        xtype: 'passwordfield',
        placeHolder: 'Password*',
        tabIndex: 3
    },
    {
        name: 'confpassword',
        id: 'reconfpassword',
        xtype: 'passwordfield',
        placeHolder: 'Confirm Password*',
        tabIndex: 4
    },
    {
        name: 'address',
        id: 'readdress',
        xtype: 'textareafield',
        placeHolder: 'Address*',
        tabIndex: 5
    },
    {
        name: 'dob',
        id: 'redob',
        placeHolder: 'Date Of Birth',
        xtype: 'datepickerfield',
        destroyPickerOnHide: true,
        picker: {
            yearFrom: 1960
        },
        tabIndex: 6
    }
]

When I am filling up the form in Android keyboard there is a 'Go' button in bottom right corner of the android keyboard, which helps us to submit the form. But I want a 'Next' button which will take me to the next field, I mean if I filled the name and press the 'Next' button on Android keyboard then it should take me to email.

Are making this app for android? – Naitik Aug 26 '14 at 09:34 — Naitik, Aug 26 '14 at 09:34

score 0 · Answer 1 · edited May 23 '17 at 11:57

The action event is triggered on a textfield whenever the "Return" or "Go" key is pressed. You should leverage that to call the focus method on the next field.

Something like this will work on Android, didn't test it on iOS though

Ext.define('Fiddle.view.Main', {

    extend: 'Ext.Container',

    config: {
        fullscreen: true,
        styleHtmlContent: true,
        items: [
            {
                xtype: 'textfield',
                label: 'First field',
                listeners: {
                    action: function() {
                        Ext.getCmp('field_2').focus();
                    }
                }
            },
            {
                id: 'field_2',
                xtype: 'textfield',
                label: 'Second field'
            }
        ]
    }

});

Working example at: https://fiddle.sencha.com/?fiddle=b3o#fiddle/b3o

[EDIT]

Previous solution remains valid but I found this linked question:

How to change the Android softkey keyboard "Go" button to "Next".

This is done on the native Android project and modifies the behavior of the "Go" button application wide. Check it out.

Sencha touch keyboard next button on xtype textfield

1 Answers1