[Ext JS]5.1.1 Grouped Header Grid and usage skills

A table with grouped headers, that is, the header row of the table is not only one row, but may be two or more rows, and there is a hierarchical relationship between the upper and lower rows.
Taking the two-layer grouping title bar as an example, the displayed effect is as follows:

Method to realize

The definition of the grouped title bar is very simple, that is, the columns are nested under the columns, and the dataIndex is defined at the last level of the title. The complete definition is shown in the following code:

           Ext.create('Ext.grid.Panel',{
				renderTo:'div1',
				store: mystore,
				columns:[
				{
					text:'',
					dataIndex:'power'
				},
				{
					text:'魏国',
					columns: [{
						text:'许昌',
						dataIndex:'xc'
					},{
						text:'洛阳',
						dataIndex:'ly'
					}]
				},{
					text:'蜀国',
					columns: [{
						text:'成都',
						dataIndex:'cd'
					},{
						text:'汉中',
						dataIndex:'hz'
					}]
				},{
					text:'吴国',
					columns: [{
						text:'长沙',
						dataIndex:'cs'
					},{