Question

我正在尝试开发一个pin代码面板。当面板被激活时，我希望第一个字段被聚焦/激活，当输入一个数字时，进入下一个字段，然后在最后一个字段上提交。这应该与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将焦点设置在下一个数字字段上。

自动进入Sencha Touch 2.1中的下一个字段

1 个答案: