---
title: "Ext.grid.header.Container"
description: "xtype 为 headercontainer 的 Ext JS 原生组件参考。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Ext.grid.header.Container

源码定义：`ext-all-debug.js:119627`。分类：数据视图、表格与树。

## 创建示例

```javascript
var component = Ext.create("Ext.grid.header.Container", {
  xtype: "headercontainer",
  baseCls: Ext.baseCSSPrefix + 'grid-header-ct',
  border: true,
  columnsText: 'Columns',
  ddLock: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'grid-header-ct'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'grid-header-ct'` |
| `border` | `Boolean` | `true` | 控制是否显示组件边框。 | `border: true` |
| `columnsText` | `String` | `'Columns'` | 配置组件的 `columnsText` 选项。 | `columnsText: 'Columns'` |
| `ddLock` | `Boolean` | `false` | 控制是否启用 `ddLock` 行为。 | `ddLock: false` |
| `defaultType` | `String` | `'gridcolumn'` | 配置组件的 `defaultType` 选项。 | `defaultType: 'gridcolumn'` |
| `defaultWidth` | `Number` | `100` | Width of the header if no width or flex is specified. | `defaultWidth: 100` |
| `detachOnRemove` | `Boolean` | `false` | 控制是否启用 `detachOnRemove` 行为。 | `detachOnRemove: false` |
| `dock` | `String` | `'top'` | 配置组件的 `dock` 选项。 | `dock: 'top'` |
| `dragging` | `Boolean` | `false` | 标记组件当前是否处于拖动状态。 | `dragging: false` |
| `enableColumnHide` | `Boolean` | `true` | =true] False to disable column hiding within this grid. | `enableColumnHide: true` |
| `headerOpenCls` | `Mixed` | `Ext.baseCSSPrefix + 'column-header-open'` | 配置 `headerOpenCls` 对应的 CSS 类名。 | `headerOpenCls: Ext.baseCSSPrefix + 'column-header-open'` |
| `menuColsIcon` | `Mixed` | `Ext.baseCSSPrefix + 'cols-icon'` | 配置组件的 `menuColsIcon` 选项。 | `menuColsIcon: Ext.baseCSSPrefix + 'cols-icon'` |
| `menuSortAscCls` | `Mixed` | `Ext.baseCSSPrefix + 'hmenu-sort-asc'` | 配置 `menuSortAscCls` 对应的 CSS 类名。 | `menuSortAscCls: Ext.baseCSSPrefix + 'hmenu-sort-asc'` |
| `menuSortDescCls` | `Mixed` | `Ext.baseCSSPrefix + 'hmenu-sort-desc'` | 配置 `menuSortDescCls` 对应的 CSS 类名。 | `menuSortDescCls: Ext.baseCSSPrefix + 'hmenu-sort-desc'` |
| `sealed` | `Boolean` | `-` | =false] Specify as `true` to constrain column dragging so that a column cannot be dragged into or out of this column. **Note that this config is only valid for column headers which contain child column headers, eg:** \{ sealed: true text: 'ExtJS', columns: [\{ text: '3.0.4', dataIndex: 'ext304' \}, \{ text: '4.1.0', dataIndex: 'ext410' \} \} | `sealed: true` |
| `sortable` | `Boolean` | `true` | Provides the default sortable state for all Headers within this HeaderContainer. Also turns on or off the menus in the HeaderContainer. Note that the menu is shared across every header and therefore turning it off will remove the menu items for every header. | `sortable: true` |
| `sortAscText` | `String` | `'Sort Ascending'` | 配置组件的 `sortAscText` 选项。 | `sortAscText: 'Sort Ascending'` |
| `sortClearText` | `String` | `'Clear Sort'` | 配置组件的 `sortClearText` 选项。 | `sortClearText: 'Clear Sort'` |
| `sortDescText` | `String` | `'Sort Descending'` | 配置组件的 `sortDescText` 选项。 | `sortDescText: 'Sort Descending'` |
| `weight` | `Number` | `100` | HeaderContainer overrides the default weight of 0 for all docked items to 100. This is so that it has more priority over things like toolbars. | `weight: 100` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `headerCounter`、`plugins` 状态。源码涉及 `callParent()`、`addEvents()`。 | `component.initComponent()` |
| `initEvents` | `` | 初始化 `events`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`mon()`。 | `component.initEvents()` |
| `onHeaderCtEvent` | `e, t` | 处理 `headerCtEvent` 回调。源码涉及 `onHeaderTriggerClick()`、`onHeaderClick()`、`onHeaderContextMenu()`。 | `component.onHeaderCtEvent(...)` |
| `onHeaderCtMouseOver` | `e, t` | 处理 `headerCtMouseOver` 回调。 | `component.onHeaderCtMouseOver(...)` |
| `onHeaderCtMouseOut` | `e, t` | 处理 `headerCtMouseOut` 回调。 | `component.onHeaderCtMouseOut(...)` |
| `isLayoutRoot` | `` | 判断 `layoutRoot` 状态。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.isLayoutRoot()` |
| `getOwnerHeaderCt` | `` | 读取并返回 `ownerHeaderCt`。源码涉及 `up()`。 | `component.getOwnerHeaderCt()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为、更新 `columnManager`、`visibleColumnManager` 状态。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `applyColumnsState` | `columns` | 应用 `columnsState`。源码涉及 `purgeCache()`。 | `component.applyColumnsState(...)` |
| `getColumnsState` | `` | 读取并返回 `columnsState`。 | `component.getColumnsState()` |
| `onAdd` | `c` | 处理 `add` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`onHeadersChanged()`。 | `component.onAdd(...)` |
| `move` | `fromIdx, toIdx` | 处理 `move` 操作。 执行时会保留父类默认行为。源码涉及 `getOwnerHeaderCt()`、`callParent()`。 | `component.move(...)` |
| `onMove` | `headerToMove, fromIdx, toIdx` | 处理 `move` 回调。 执行时会保留父类默认行为。源码涉及 `getOwnerHeaderCt()`、`onHeadersChanged()`、`callParent()`。 | `component.onMove(...)` |
| `onRemove` | `c` | 处理 `remove` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`onHeadersChanged()`、`detachComponent()`。 | `component.onRemove(...)` |
| `onHeadersChanged` | `c, isMove` | 处理 `headersChanged` 回调。源码涉及 `getOwnerHeaderCt()`、`purgeHeaderCtCache()`。 | `component.onHeadersChanged(...)` |
| `onHeaderMoved` | `header, colsToMove, fromIdx, toIdx` | 处理 `headerMoved` 回调。 执行时会派发 `columnmove` 事件。源码涉及 `fireEvent()`。 | `component.onHeaderMoved(...)` |
| `onColumnsChanged` | `` | 处理 `columnsChanged` 回调。 执行时会派发 `columnschanged` 事件。源码涉及 `fireEvent()`。 | `component.onColumnsChanged()` |
| `applyDefaults` | `config` | 应用 `defaults`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.applyDefaults(...)` |
| `setSortState` | `` | 设置 `sortState`。源码涉及 `up()`。 | `component.setSortState()` |
| `getHeaderMenu` | `` | 读取并返回 `headerMenu`。源码涉及 `getMenu()`。 | `component.getHeaderMenu()` |
| `onHeaderVisibilityChange` | `header, visible` | 处理 `headerVisibilityChange` 回调。源码涉及 `getHeaderMenu()`、`purgeHeaderCtCache()`、`getMenuItemForHeader()`。 | `component.onHeaderVisibilityChange(...)` |
| `updateMenuDisabledState` | `menu` | 更新 `menuDisabledState`。源码涉及 `query()`、`getMenu()`、`getMenuItemForHeader()`。 | `component.updateMenuDisabledState(...)` |
| `getMenuItemForHeader` | `menu, header` | 读取并返回 `menuItemForHeader`。 | `component.getMenuItemForHeader(...)` |
| `onHeaderShow` | `header` | 处理 `headerShow` 回调。 执行时会派发 `columnshow`、`columnschanged` 事件。源码涉及 `onHeaderVisibilityChange()`、`fireEvent()`。 | `component.onHeaderShow(...)` |
| `onHeaderHide` | `header` | 处理 `headerHide` 回调。 执行时会派发 `columnhide`、`columnschanged` 事件。源码涉及 `onHeaderVisibilityChange()`、`fireEvent()`。 | `component.onHeaderHide(...)` |
| `tempLock` | `` | 临时锁定 `lock`。 执行时会更新 `ddLock` 状态。 | `component.tempLock()` |
| `onHeaderResize` | `header, w` | 处理 `headerResize` 回调。 执行时会派发 `columnresize` 事件。源码涉及 `fireEvent()`。 | `component.onHeaderResize(...)` |
| `onHeaderClick` | `header, e, t` | 处理 `headerClick` 回调。 执行时会派发 `headerclick`、`headerclick` 事件。源码涉及 `fireEvent()`。 | `component.onHeaderClick(...)` |
| `onHeaderContextMenu` | `header, e, t` | 处理 `headerContextMenu` 回调。 执行时会派发 `headercontextmenu`、`headercontextmenu` 事件。源码涉及 `fireEvent()`。 | `component.onHeaderContextMenu(...)` |
| `onHeaderTriggerClick` | `header, e, t` | 处理 `headerTriggerClick` 回调。 执行时会派发 `headertriggerclick`、`headertriggerclick` 事件。源码涉及 `fireEvent()`、`showMenuBy()`。 | `component.onHeaderTriggerClick(...)` |
| `showMenuBy` | `t, header` | 显示 `menuBy`。源码涉及 `getMenu()`。 | `component.showMenuBy(...)` |
| `onMenuHide` | `menu` | 处理 `menuHide` 回调。 | `component.onMenuHide(...)` |
| `moveHeader` | `fromIdx, toIdx` | 处理 `moveHeader` 操作。源码涉及 `tempLock()`、`move()`。 | `component.moveHeader(...)` |
| `purgeHeaderCtCache` | `headerCt` | 清理缓存 `headerCtCache`。 | `component.purgeHeaderCtCache(...)` |
| `purgeCache` | `` | 清理缓存 `cache`。 执行时会更新 `gridVisibleColumns`、`gridDataColumns` 状态。 | `component.purgeCache()` |
| `getMenu` | `` | 读取并返回 `menu`。 执行时会派发 `menucreate` 事件、更新 `menu` 状态。源码涉及 `getMenuItems()`、`fireEvent()`。 | `component.getMenu()` |
| `beforeMenuShow` | `menu` | 在 `menuShow` 前执行预处理。源码涉及 `getColumnMenu()`、`updateMenuDisabledState()`。 | `component.beforeMenuShow(...)` |
| `getMenuItems` | `` | 读取并返回 `menuItems`。源码涉及 `getColumnMenu()`、`getMenu()`。 | `component.getMenuItems()` |
| `onSortAscClick` | `` | 处理 `sortAscClick` 回调。源码涉及 `getMenu()`。 | `component.onSortAscClick()` |
| `onSortDescClick` | `` | 处理 `sortDescClick` 回调。源码涉及 `getMenu()`。 | `component.onSortDescClick()` |
| `cpyColClick` | `` | 处理 `cpyColClick` 操作。源码涉及 `getMenu()`。 | `component.cpyColClick()` |
| `getColumnMenu` | `headerContainer` | 读取并返回 `columnMenu`。 | `component.getColumnMenu(...)` |
| `onColumnCheckChange` | `checkItem, checked` | 处理 `columnCheckChange` 回调。 | `component.onColumnCheckChange(...)` |
| `getColumnCount` | `` | 读取并返回 `columnCount`。源码涉及 `getGridColumns()`。 | `component.getColumnCount()` |
| `getTableWidth` | `` | 读取并返回 `tableWidth`。源码涉及 `getVisibleGridColumns()`。 | `component.getTableWidth()` |
| `getVisibleGridColumns` | `` | 读取并返回 `visibleGridColumns`。 执行时会更新 `gridVisibleColumns` 状态。源码涉及 `getGridColumns()`。 | `component.getVisibleGridColumns()` |
| `getGridColumns` | `/* private - used in recursion*/inResult, hiddenAncestor` | 读取并返回 `gridColumns`。 执行时会更新 `gridDataColumns` 状态。 | `component.getGridColumns(...)` |
| `getHideableColumns` | `` | 读取并返回 `hideableColumns`。 执行时会更新 `hideableColumns` 状态。源码涉及 `query()`。 | `component.getHideableColumns()` |
| `getHeaderIndex` | `header` | 读取并返回 `headerIndex`。 执行时会更新 `columnManager` 状态。源码涉及 `getOwnerHeaderCt()`。 | `component.getHeaderIndex(...)` |
| `getHeaderAtIndex` | `index` | 读取并返回 `headerAtIndex`。 执行时会更新 `columnManager` 状态。源码涉及 `getOwnerHeaderCt()`。 | `component.getHeaderAtIndex(...)` |
| `getVisibleHeaderClosestToIndex` | `index` | 将 `getVisibleHeaderClosest` 转换为 `index`。 执行时会更新 `visibleColumnManager` 状态。源码涉及 `getOwnerHeaderCt()`。 | `component.getVisibleHeaderClosestToIndex(...)` |
| `applyForceFit` | `header` | 应用 `forceFit`。源码涉及 `getVisibleGridColumns()`。 | `component.applyForceFit(...)` |
| `autoSizeColumn` | `header` | 自动计算尺寸 `column`。源码涉及 `applyForceFit()`。 | `component.autoSizeColumn(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `columnhide` | 表格列隐藏后触发。 源码在 `onHeaderHide()` 中通过 `fireEvent()` 触发。 | `listeners: { columnhide: function () {} }` |
| `columnmove` | 表格列位置改变后触发。 源码在 `onHeaderMoved()` 中通过 `fireEvent()` 触发。 | `listeners: { columnmove: function () {} }` |
| `columnresize` | 表格列宽度改变后触发。 源码在 `onHeaderResize()` 中通过 `fireEvent()` 触发。 | `listeners: { columnresize: function () {} }` |
| `columnschanged` | Fired after the columns change in any way, when a column has been hidden or shown, or when a column is added to or removed from this header container. | `listeners: { columnschanged: function () {} }` |
| `columnshow` | 表格列显示后触发。 源码在 `onHeaderShow()` 中通过 `fireEvent()` 触发。 | `listeners: { columnshow: function () {} }` |
| `headerclick` | 用户点击表格列表头时触发。 源码在 `onHeaderClick()` 中通过 `fireEvent()` 触发。 | `listeners: { headerclick: function () {} }` |
| `headercontextmenu` | 用户打开列表头上下文菜单时触发。 源码在 `onHeaderContextMenu()` 中通过 `fireEvent()` 触发。 | `listeners: { headercontextmenu: function () {} }` |
| `headertriggerclick` | 用户点击列表头菜单触发器时触发。 源码在 `onHeaderTriggerClick()` 中通过 `fireEvent()` 触发。 | `listeners: { headertriggerclick: function () {} }` |
| `menucreate` | Fired immediately after the column header menu is created. | `listeners: { menucreate: function () {} }` |
| `sortchange` | 排序状态变化后触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { sortchange: function () {} }` |

Source: https://ag.879818327.xyz/ext/data/grid-header-container/index.mdx