3

我正在尝试开发一个密码面板。当面板被激活时，我希望第一个字段被聚焦/激活，当输入一个数字时，进入下一个字段，然后提交最后一个。这应该感觉类似于 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
            }
        ]
    }

});
4

1 回答 1

4

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

问题是在每个数字字段上添加一个keyup侦听器，并将焦点设置在下一个使用tabIndex.

于 2012-11-26T13:48:41.520 回答