extjs4 多层表头

在 ExtJS4 中，可以使用 Ext.grid.header.Container 和 Ext.grid.column.Column 类来实现多层表头。具体步骤如下：

1. 创建一个 Ext.grid.Panel 实例，并定义表格列的配置项。

2. 使用 Ext.grid.header.Container 类创建表头容器，设置容器的布局和样式。

3. 使用 Ext.grid.column.Column 类创建表头列，设置列的文字、宽度、数据域等属性。

4. 将表头列添加到表头容器中，并设置表头列的嵌套关系，即将子表头列添加到父表头列的子项中。

5. 将表头容器设置为表格的顶部工具栏，通过表格的 reconfigure 方法重新加载数据。

示例代码如下：

var grid = Ext.create('Ext.grid.Panel', {
    columns: [
        {
            text: 'Group 1',
            columns: [
                { text: 'Name', dataIndex: 'name', width: 100 },
                { text: 'Age', dataIndex: 'age', width: 50 }
            ]
        },
        {
            text: 'Group 2',
            columns: [
                { text: 'City', dataIndex: 'city', width: 100 },
                { text: 'Country', dataIndex: 'country', width: 100 }
            ]
        }
    ],
    store: store,
    tbar: {
        xtype: 'headercontainer',
        items: [
            {
                xtype: 'gridcolumn',
                text: 'Group 1',
                columns: [
                    { text: 'Name', dataIndex: 'name', width: 100 },
                    { text: 'Age', dataIndex: 'age', width: 50 }
                ]
            },
            {
                xtype: 'gridcolumn',
                text: 'Group 2',
                columns: [
                    { text: 'City', dataIndex: 'city', width: 100 },
                    { text: 'Country', dataIndex: 'country', width: 100 }
                ]
            }
        ]
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

其中，store 是数据源，可以使用 Ext.data.Store 类创建。在这个示例中，表头容器使用了 Ext.grid.header.Container 类，并且设置了 xtype 为 'headercontainer'，表头列使用了 Ext.grid.column.Column 类，并且设置了 xtype 为 'gridcolumn'。表头列的嵌套关系通过 columns 属性实现。最后，表头容器作为表格的顶部工具栏，通过 tbar 属性设置。