CODEWITHSUNDEEP
extjssencha-touchsencha-touch-2sencha-touch-2.1
Simon
Simon

Reputation: 5247

Automatically progress to next field in Sencha Touch 2.1

I'm trying to develop a pin code panel. When the panel is activated I want the first field to be focused/active and when a single digit is entered progress onto the next fields and then submit on the last one. This should feel similar to the iPhone/Android lock screen.

I've been trying for hours and cannot work it out. It seems so simple! An help much appreciated.

Ext.define('MyApp.view.PinPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.pinpanel',

    config: {
        centered: true,
        height: '100px',
        width: '300px',
        hideOnMaskTap: true,
        layout: {
            type: 'hbox'
        },
        modal: true,
        items: [
            {
                xtype: 'numberfield',
                margin: '0 10 0 0',
                width: 50,
                clearIcon: false,
                name: 'pin0',
                tabIndex: 1
            },
            {
                xtype: 'numberfield',
                margin: '0 10 0 0',
                width: 50,
                clearIcon: false,
                name: 'pin1',
                tabIndex: 2
            },
            {
                xtype: 'numberfield',
                margin: '0 10 0 0',
                width: 50,
                clearIcon: false,
                name: 'pin2',
                tabIndex: 3
            },
            {
                xtype: 'numberfield',
                width: 50,
                clearIcon: false,
                name: 'pin3',
                tabIndex: 4
            }
        ]
    }

});

Upvotes: 3

Views: 1435

Answers (1)

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

Here you go : http://www.senchafiddle.com/#Oec2J

The thing is to add a keyup listener on every numberfield and set the focus on the next one use the tabIndex.

Upvotes: 4

Related Questions