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

Posted 2023-02-25

【中文标题】Sencha Touch 2.1 自动进入下一个字段

【英文标题】：Automatically progress to next field in Sencha Touch 2.1

【发布时间】：2012-11-26 13:09:04

【问题描述】：

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

);

【参考方案1】：

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

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

【讨论】：

这是正确的。非常感谢。也为使用 Sencha Fiddle 竖起大拇指。

太棒了！我将来需要这个作为应用程序，非常感谢！

Senchafiddle 链接已失效