Ext Js how to Group textfields by rows & columns?

Question

I want to group textfields by columns & rows, I have tried with layout type 'table' but I'm unable to group the textfields, I need Like below, please help me, Im completely new to Ext jS,thanks in advance.

              column 1           column 2              column 3

 Row 1     Name: textfield     RollNo: textfield     Language: textfield
 Row 2     Age:  textfield     Ph: textfield         Class: textfield        
 Row 3     ID:   textfield     Email: textfield      Class: textfield 

Answer 1

There is multiple ways how to achieve this but what you could do is to set the layout of the main form to hbox (horizontal box) than add 3 containers (or you could use fieldset, fieldcontainers) and in them set the layout to default or vbox (vertical). You can also play with the flex config to position your fields correctly.

You can always add more containers and play with their layouts.

Also you could try to use table layout http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#layout-table

I personally use Sencha Architect so it's much faster for me to create such form with hbox and vbox layouts.

Check out this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/200h

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.myform',

    requires: [
        'Ext.form.FieldContainer',
        'Ext.form.field.Text'
    ],

    bodyPadding: 10,
    title: 'My Form',

    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [
        {
            xtype: 'fieldcontainer',
            flex: 1,
            height: 120,
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                }
            ]
        },
        {
            xtype: 'fieldcontainer',
            flex: 1,
            height: 120,
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                }
            ]
        },
        {
            xtype: 'fieldcontainer',
            flex: 1,
            height: 120,
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Label'
                }
            ]
        }
    ]

});