extjs多表头和表头合并

ExtJS 提供了 `Ext.grid.plugin.MultiHeader` 插件来实现多表头功能，使用该插件可以在表格中创建多级表头。同时，可以使用 `grid.headerCt.insert` 方法来实现表头合并，具体实现方法如下：

1. 导入 `Ext.grid.plugin.MultiHeader` 插件

Ext.Loader.setPath({
    'Ext.ux': '/ux'
});

Ext.require([
    'Ext.ux.grid.plugin.MultiHeader'
]);

2. 创建表格并添加 `Ext.grid.plugin.MultiHeader` 插件

Ext.create('Ext.grid.Panel', {
    plugins: [{
        ptype: 'gridheadergroup'
    }],
    columns: [{
        text: '商品类型',
        align: 'center',
        dataIndex: 'type',
        width: 200,
        rowspan: 2 // 该列占用两行
    }, {
        text: '商品信息',
        align: 'center',
        columns: [{
            text: '商品名称',
            align: 'center',
            dataIndex: 'name',
            width: 150,
            rowspan: 2 // 该列占用两行
        }, {
            text: '商品价格',
            align: 'center',
            dataIndex: 'price',
            width: 100,
            colspan: 2 // 该列占用两列
        }]
    }, {
        text: '销售信息',
        align: 'center',
        columns: [{
            text: '销售数量',
            align: 'center',
            dataIndex: 'num',
            width: 100
        }, {
            text: '销售金额',
            align: 'center',
            dataIndex: 'amount',
            width: 100
        }]
    }]
});

在表格中，使用 `rowspan` 属性来指定某一列占用的行数，使用 `colspan` 属性来指定某一列占用的列数。此外，还可以在表格的列配置项中使用 `header` 属性来设置表头文字。