Блог

Как я могу создать этот тип с помощью ExtJS 4.

Да, я решил это с помощью 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
                            }
                        ]

                    }
                ]
            });