---
title: "Ext.panel.Header"
description: "xtype 为 header 的 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.panel.Header

源码定义：`ext-all-debug.js:54297`。分类：容器、面板与窗口。

## 创建示例

```javascript
var component = Ext.create("Ext.panel.Header", {
  xtype: "header",
  childEls: [,
  componentLayout: 'body',
  defaultType: 'tool',
  headerCls: Ext.baseCSSPrefix + 'header',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `componentLayout` | `String` | `'body'` | 组件采用的内部布局策略。 | `componentLayout: 'body'` |
| `defaultType` | `String` | `'tool'` | 配置组件的 `defaultType` 选项。 | `defaultType: 'tool'` |
| `headerCls` | `Mixed` | `Ext.baseCSSPrefix + 'header'` | 配置 `headerCls` 对应的 CSS 类名。 | `headerCls: Ext.baseCSSPrefix + 'header'` |
| `headingTpl` | `Array` | `[` | 配置生成组件内容的 `headingTpl` 模板。 | `headingTpl: [` |
| `indicateDrag` | `Boolean` | `false` | 控制是否启用 `indicateDrag` 行为。 | `indicateDrag: false` |
| `isHeader` | `Boolean` | `true` | 控制是否启用 `isHeader` 行为。 | `isHeader: true` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `shrinkWrap` | `Number` | `3` | 配置组件的 `shrinkWrap` 选项。 | `shrinkWrap: 3` |
| `titlePosition` | `Number` | `0` | 配置组件的 `titlePosition` 选项。 | `titlePosition: 0` |
| `weight` | `Number` | `-1` | 配置组件的 `weight` 选项。 | `weight: -1` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `indicateDragCls`、`title` 状态。源码涉及 `hasOwnProperty()`、`getDockName()`、`addEvents()`、`addClsWithUI()`。 | `component.initComponent()` |
| `onMouseDown` | `` | 处理 `mouseDown` 回调。 | `component.onMouseDown()` |
| `setTitlePosition` | `index` | 设置 `titlePosition`。 执行时会更新 `titlePosition` 状态。源码涉及 `insert()`。 | `component.setTitlePosition(...)` |
| `initIconCmp` | `` | 初始化 `iconCmp`。 执行时会更新 `iconCmp` 状态。 | `component.initIconCmp()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.beforeRender()` |
| `afterLayout` | `` | 在 `layout` 后执行后处理。源码涉及 `adjustTitlePosition()`、`getWidth()`。 | `component.afterLayout()` |
| `beforeLayout` | `` | 在 `layout` 前执行预处理。 执行时会保留父类默认行为、同步关联状态。源码涉及 `callParent()`、`syncBeforeAfterTitleClasses()`。 | `component.beforeLayout()` |
| `adjustTitlePosition` | `` | 调整 `titlePosition`。 | `component.adjustTitlePosition()` |
| `onTitleRender` | `` | 生成 `onTitle` 的渲染结果。 | `component.onTitleRender()` |
| `addUIClsToElement` | `cls` | 将 `addUICls` 转换为 `element`。 执行时会保留父类默认行为、更新 `bodyCls` 状态。源码涉及 `callParent()`。 | `component.addUIClsToElement(...)` |
| `removeUIClsFromElement` | `cls` | 移除 `uIClsFromElement`。 执行时会保留父类默认行为、更新 `bodyCls` 状态。源码涉及 `callParent()`。 | `component.removeUIClsFromElement(...)` |
| `addUIToElement` | `` | 将 `addUI` 转换为 `element`。 执行时会保留父类默认行为、更新 `bodyCls` 状态。源码涉及 `callParent()`。 | `component.addUIToElement()` |
| `removeUIFromElement` | `` | 移除 `uIFromElement`。 执行时会保留父类默认行为、更新 `bodyCls` 状态。源码涉及 `callParent()`。 | `component.removeUIFromElement()` |
| `onClick` | `e` | 处理 `click` 回调。源码涉及 `fireClickEvent()`。 | `component.onClick(...)` |
| `onDblClick` | `e` | 处理 `dblClick` 回调。源码涉及 `fireClickEvent()`。 | `component.onDblClick(...)` |
| `fireClickEvent` | `type, e` | 触发 `clickEvent`。 执行时会派发组件事件。源码涉及 `fireEvent()`。 | `component.fireClickEvent(...)` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。 | `component.getFocusEl()` |
| `getTargetEl` | `` | 读取并返回 `targetEl`。 | `component.getTargetEl()` |
| `applyTargetCls` | `targetCls` | 应用 `targetCls`。 执行时会更新 `bodyTargetCls` 状态。 | `component.applyTargetCls(...)` |
| `setTitle` | `title` | 设置 `title`。 执行时会更新 `title` 状态。 | `component.setTitle(...)` |
| `getMinWidth` | `` | 读取并返回 `minWidth`。 | `component.getMinWidth()` |
| `setIconCls` | `cls` | 设置 `iconCls`。 执行时会更新 `iconCls` 状态。源码涉及 `initIconCmp()`、`insert()`。 | `component.setIconCls(...)` |
| `setIcon` | `icon` | 设置 `icon`。 执行时会更新 `icon` 状态。源码涉及 `initIconCmp()`、`insert()`。 | `component.setIcon(...)` |
| `setGlyph` | `glyph` | 设置 `glyph`。源码涉及 `initIconCmp()`、`insert()`。 | `component.setGlyph(...)` |
| `getTools` | `` | 读取并返回 `tools`。 | `component.getTools()` |
| `addTool` | `tool` | 添加 `tool`。源码涉及 `add()`。 | `component.addTool(...)` |
| `syncBeforeAfterTitleClasses` | `force` | 同步 `beforeAfterTitleClasses`。 执行时会更新 `syncBeforeAfterGen` 状态。 | `component.syncBeforeAfterTitleClasses(...)` |
| `onAdd` | `component, index` | 处理 `add` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onAdd(...)` |
| `initRenderData` | `` | 初始化 `renderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.initRenderData()` |
| `getDockName` | `` | 读取并返回 `dockName`。 | `component.getDockName()` |
| `getFramingInfoCls` | `` | 读取并返回 `framingInfoCls`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getFramingInfoCls()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `click` | 用户点击组件时触发。 源码在 `onClick()` 中监听或处理该事件；本类未找到 `fireEvent()` 转发调用。 | `listeners: { click: function () {} }` |
| `dblclick` | 用户双击组件时触发。 源码在 `onDblClick()` 中监听或处理该事件；本类未找到 `fireEvent()` 转发调用。 | `listeners: { dblclick: function () {} }` |

Source: https://ag.879818327.xyz/ext/layout/panel-header/index.mdx