Ext Js how to Group textfields by rows & columns? - extjs

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'
}
]
}
]
});