extjs - 在 Sencha Touch 2.1 中自动前进到下一个字段

Question

我正在尝试开发一个密码面板。当面板被激活时，我希望第一个字段被聚焦/激活，当输入一个数字时进入下一个字段，然后在最后一个字段上提交。这应该与 iPhone/Android 锁屏感觉相似。

我已经尝试了几个小时，但无法解决。看起来很简单!非常感谢您的帮助。

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
            }
        ]
    }

});

Answer 1

给你:http://www.senchafiddle.com/#Oec2J

事情是在每个数字字段上添加一个 keyup 监听器，并使用 tabIndex 将焦点设置在下一个数字字段上。