1. Table layout is defined by the class Ext.layout.TableLayout, which is similar to the table in HTML and can merge rows or columns.
layoutConfig uses columns to specify that the parent container is divided into 3 columns, and
rowspan merges the number of rows.
colspan merges the number of columns.
2. Application examples
Ext.onReady(function (){
var _panel = new Ext.Panel({
title:"Personnel Information",
renderTo:Ext.getBody(),
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:"child element 1",html:"This is child element 1 Content", rowspan:2,height:100},
{title:"Sub-element 2",html:"This is the content of sub-element 2",colspan:2},
{title:" Child element 3",html:"This is the content in child element 3"},
{title:"Sub element 4",html:"This is the content in child element 4"}
]
}
);