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

것은 모든 numberfield에 keyup 리스너를 추가하고 tabIndex을 사용하여 다음 중 하나에 포커스를 설정하는 것입니다.