extjs4 动态设置表头

在 ExtJS 4 中，您可以使用 `reconfigure` 方法来动态设置表头。以下是一个示例代码：

var grid = Ext.create('Ext.grid.Panel', {
  store: store,
  columns: [],  // 初始为空的列配置
  renderTo: Ext.getBody()
});

// 动态设置表头
var newColumns = [
  { text: 'Name', dataIndex: 'name', flex: 1 },
  { text: 'Quantity', dataIndex: 'quantity' },
  { text: 'Price', dataIndex: 'price' }
];

grid.reconfigure(null, newColumns);

在这个示例中，我们创建了一个空的 `grid`，并在初始时将 `columns` 配置设置为空。

然后，我们定义了一个新的列配置 `newColumns`，其中包含了要显示的列的信息。

最后，我们使用 `reconfigure` 方法来设置新的列配置。第一个参数传入 `null`，表示保持现有的 `store` 不变。第二个参数传入新的列配置 `newColumns`。

这样，表格的表头会根据新的列配置进行动态更新。

希望这对您有所帮助！如果您有任何其他问题，请随时提问。

相关问题

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 属性设置。

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` 属性来设置表头文字。