単一行のExtJSマルチパートテキストフィールド

Question

どのようにしてこのタイプを作成することができますかExtJS 4。

Answer 1

はい私はExt.form.FieldSetを使用して解決しました。

  Ext.create('Ext.form.FieldSet', { 
       title: 'Deposit A/C No', 
       defaults: { 
        labelWidth: 89, 
        layout: { 
         type: 'hbox', 
         defaultMargins: {top: 0, right: 5, bottom: 0, left: 0} 
        } 
       }, 
       items: [ 
        { 
         xtype: 'fieldcontainer', 
         combineErrors: true, 
         msgTarget: 'side', 
         defaults: { 
          hideLabel: true 
         }, 
         items: [ 

          { 
           xtype: 'textfield', 
           width: 15, 
           name: 'part1', 
           value: '2', 
           maskRe: /[0-9.]/, 
           readOnly: true 
          }, 
          {xtype: 'displayfield', value: '-'}, 
          { 
           xtype: 'textfield', 
           width: 30, 
           name: 'part2', 
           value: '050', 
           maskRe: /[0-9.]/, 
           readOnly: true 
          }, 
          {xtype: 'displayfield', value: '-'}, 
          { 
           xtype: 'textfield', 
           width: 30, 
           name: 'part3', 
           value: '213', 
           maskRe: /[0-9.]/, 
           maxLength: 3, 
           enforceMaxLength: 3, 
           keyup: function() { 
            var part4 = this.getValue(); 
            if (part4.length >= 3) { 
             var form = this.up('form').getForm(); 
             form.findField("part4").focus(); 
            } 
           } 
          }, 
          {xtype: 'displayfield', value: '-'}, { 
           xtype: 'textfield', 
           width: 30, 
           name: 'part4', 
           maskRe: /[0-9.]/, 
           enableKeyEvents: true, 
           maxLength: 2, 
           enforceMaxLength: 2, 
           listeners: { 
            afterrender: function (field) { 
             field.focus(); 
            }, 
            keyup: function() { 
             var part4 = this.getValue(); 
             if (part4.length >= 2) { 
              var form = this.up('form').getForm(); 
              form.findField("part5").focus(); 
             } 
            } 
           } 
          }, 
          {xtype: 'displayfield', value: '-'}, 
          { 
           xtype: 'textfield', 
           width: 70, 
           name: 'part5', 
           maskRe: /[0-9.]/, 
           //msgTarget: 'down', 
           maxLength: 6, 
           enforceMaxLength: 6, 
           msgTarget: 'side', 
           enableKeyEvents: true, 
           listeners: { 
            //keyup: setCheckValue, 
            //specialkey: submitOnEnter 
           } 
          }, 
          {xtype: 'displayfield', value: '-'}, { 
           xtype: 'textfield', 
           width: 30, 
           name: 'part6', 
           maskRe: /[0-9.]/, 
           readOnly: true 
          } 
         ] 

        } 
       ] 
      });