3

ピンコードパネルを開発しようとしています。パネルがアクティブになると、最初のフィールドがフォーカス/アクティブになり、1桁が入力されると次のフィールドに進み、最後のフィールドに送信されます。これは、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 に答える