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

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

## 创建示例

```javascript
var component = Ext.create("Ext.panel.Panel", {
  xtype: "panel",
  addTools: Ext.emptyFn,
  animCollapse: Ext.enableFx,
  border: false,
  closable: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `addTools` | `Mixed` | `Ext.emptyFn` | 配置组件的 `addTools` 选项。 | `addTools: Ext.emptyFn` |
| `animCollapse` | `Mixed` | `Ext.enableFx` | 配置组件的 `animCollapse` 选项。 | `animCollapse: Ext.enableFx` |
| `border` | `Boolean` | `false` | 控制是否显示组件边框。 | `border: false` |
| `closable` | `Boolean` | `false` | 控制组件是否显示关闭操作。 | `closable: false` |
| `closeAction` | `String` | `'destroy'` | 配置组件的 `closeAction` 选项。 | `closeAction: 'destroy'` |
| `collapsed` | `Boolean` | `false` | 控制面板初始是否处于收起状态。 | `collapsed: false` |
| `collapsedCls` | `String` | `'collapsed'` | 配置 `collapsedCls` 对应的 CSS 类名。 | `collapsedCls: 'collapsed'` |
| `collapseFirst` | `Boolean` | `true` | 控制是否启用 `collapseFirst` 行为。 | `collapseFirst: true` |
| `collapsible` | `Mixed` | `undefined` | 控制面板是否允许展开和收起。 | `collapsible: undefined` |
| `constrain` | `Boolean` | `false` | 控制是否启用 `constrain` 行为。 | `constrain: false` |
| `constrainHeader` | `Boolean` | `false` | 控制是否启用 `constrainHeader` 行为。 | `constrainHeader: false` |
| `floatable` | `Boolean` | `true` | 控制是否启用 `floatable` 行为。 | `floatable: true` |
| `frame` | `Boolean` | `false` | 控制是否启用 `frame` 行为。 | `frame: false` |
| `frameHeader` | `Boolean` | `true` | 控制是否启用 `frameHeader` 行为。 | `frameHeader: true` |
| `header` | `Mixed` | `undefined` | 配置组件的 `header` 选项。 | `header: undefined` |
| `headerPosition` | `String` | `'top'` | 配置组件的 `headerPosition` 选项。 | `headerPosition: 'top'` |
| `hideCollapseTool` | `Boolean` | `false` | 控制是否隐藏 `collapseTool`。 | `hideCollapseTool: false` |
| `manageHeight` | `Boolean` | `true` | 控制是否启用 `manageHeight` 行为。 | `manageHeight: true` |
| `maskElement` | `String` | `'el'` | 配置组件的 `maskElement` 选项。 | `maskElement: 'el'` |
| `minButtonWidth` | `Number` | `75` | 配置 `minButtonWidth` 限制值。 | `minButtonWidth: 75` |
| `placeholderCollapseHideMode` | `Mixed` | `Ext.Element.VISIBILITY` | 配置组件的 `placeholderCollapseHideMode` 选项。 | `placeholderCollapseHideMode: Ext.Element.VISIBILITY` |
| `preventHeader` | `Boolean` | `false` | 控制是否启用 `preventHeader` 行为。 | `preventHeader: false` |
| `titleCollapse` | `Mixed` | `undefined` | 配置组件的 `titleCollapse` 选项。 | `titleCollapse: undefined` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `collapseDirection`、`hiddenOnCollapse` 状态。源码涉及 `addEvents()`、`addStateEvents()`、`setUI()`、`bridgeToolbars()`。 | `component.initComponent()` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.beforeDestroy()` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。 | `component.getFocusEl()` |
| `getHeader` | `` | 读取并返回 `header`。 | `component.getHeader()` |
| `setTitle` | `newTitle` | 设置 `title`。 执行时会派发 `titlechange` 事件、更新 `title` 状态。源码涉及 `updateHeader()`、`fireEvent()`。 | `component.setTitle(...)` |
| `setIconCls` | `newIconCls` | 设置 `iconCls`。 执行时会派发 `iconclschange` 事件、更新 `iconCls` 状态。源码涉及 `updateHeader()`、`fireEvent()`。 | `component.setIconCls(...)` |
| `setIcon` | `newIcon` | 设置 `icon`。 执行时会派发 `iconchange` 事件、更新 `icon` 状态。源码涉及 `updateHeader()`、`fireEvent()`。 | `component.setIcon(...)` |
| `setGlyph` | `newGlyph` | 设置 `glyph`。 执行时会派发 `glyphchange` 事件、更新 `glyph` 状态。源码涉及 `updateHeader()`、`fireEvent()`。 | `component.setGlyph(...)` |
| `bridgeToolbars` | `` | 处理 `bridgeToolbars` 操作。 执行时会更新 `tbar`、`bbar` 状态。 | `component.bridgeToolbars()` |
| `isPlaceHolderCollapse` | `` | 判断 `placeHolderCollapse` 状态。 | `component.isPlaceHolderCollapse()` |
| `onBoxReady` | `` | 处理 `boxReady` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`setHiddenDocked()`。 | `component.onBoxReady()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为、更新 `preventCollapseFire`、`collapsed` 状态。源码涉及 `callParent()`、`initTools()`、`updateHeader()`、`isPlaceHolderCollapse()`。 | `component.beforeRender()` |
| `initTools` | `` | 初始化 `tools`。 执行时会更新 `tools`、`collapseDirection` 状态。源码涉及 `updateCollapseTool()`、`addTools()`、`addClsWithUI()`、`addTool()`。 | `component.initTools()` |
| `updateCollapseTool` | `` | 更新 `collapseTool`。源码涉及 `isPlaceHolderCollapse()`、`getOppositeDirection()`。 | `component.updateCollapseTool()` |
| `close` | `` | 处理 `close` 操作。 执行时会派发 `beforeclose` 事件。源码涉及 `fireEvent()`、`doClose()`。 | `component.close()` |
| `doClose` | `` | 执行 `close` 操作。 执行时会派发 `close` 事件。源码涉及 `fireEvent()`。 | `component.doClose()` |
| `updateHeader` | `force` | 更新 `header`。 执行时会更新 `header` 状态。源码涉及 `addDocked()`。 | `component.updateHeader(...)` |
| `setUI` | `ui` | 设置 `uI`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.setUI(...)` |
| `getDefaultContentTarget` | `` | 读取并返回 `defaultContentTarget`。 | `component.getDefaultContentTarget()` |
| `getTargetEl` | `` | 读取并返回 `targetEl`。 | `component.getTargetEl()` |
| `isVisible` | `deep` | 判断 `visible` 状态。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.isVisible(...)` |
| `onHide` | `` | 处理 `hide` 回调。 执行时会保留父类默认行为。源码涉及 `slideOutFloatedPanel()`、`callParent()`。 | `component.onHide()` |
| `onShow` | `` | 处理 `show` 回调。 执行时会保留父类默认行为。源码涉及 `isPlaceHolderCollapse()`、`setHiddenState()`、`placeholderCollapse()`、`callParent()`。 | `component.onShow()` |
| `onRemoved` | `destroying` | 处理 `removed` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onRemoved(...)` |
| `addTool` | `tools` | 添加 `tool`。源码涉及 `updateHeader()`。 | `component.addTool(...)` |
| `getOppositeDirection` | `d` | 读取并返回 `oppositeDirection`。 | `component.getOppositeDirection(...)` |
| `getWidthAuthority` | `` | 读取并返回 `widthAuthority`。 执行时会保留父类默认行为。源码涉及 `collapsedHorizontal()`、`callParent()`。 | `component.getWidthAuthority()` |
| `getHeightAuthority` | `` | 读取并返回 `heightAuthority`。 执行时会保留父类默认行为。源码涉及 `collapsedVertical()`、`callParent()`。 | `component.getHeightAuthority()` |
| `collapsedHorizontal` | `` | 收起 `dHorizontal`。源码涉及 `getCollapsed()`。 | `component.collapsedHorizontal()` |
| `collapsedVertical` | `` | 收起 `dVertical`。源码涉及 `getCollapsed()`。 | `component.collapsedVertical()` |
| `restoreDimension` | `` | 还原 `dimension`。 | `component.restoreDimension()` |
| `getCollapsed` | `` | 读取并返回 `collapsed`。 | `component.getCollapsed()` |
| `focusTabIndex` | `selector, prev` | 将焦点移动到 `tabIndex`。源码涉及 `query()`。 | `component.focusTabIndex(...)` |
| `onEnterRoot` | `k, e` | 处理 `enterRoot` 回调。源码涉及 `focusTabIndex()`、`onEnter()`。 | `component.onEnterRoot(...)` |
| `getState` | `` | 读取并返回 `state`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addPropertyToState()`、`collapsedVertical()`。 | `component.getState()` |
| `findReExpander` | `direction` | 查找 `reExpander`。 | `component.findReExpander(...)` |
| `getReExpander` | `direction` | 读取并返回 `reExpander`。 执行时会更新 `expandDirection`、`reExpander` 状态。源码涉及 `findReExpander()`、`getOppositeDirection()`、`createReExpander()`。 | `component.getReExpander(...)` |
| `createReExpander` | `direction, defaults` | 创建 `reExpander`。源码涉及 `isPlaceHolderCollapse()`、`getOppositeDirection()`、`getHeaderCollapsedClasses()`。 | `component.createReExpander(...)` |
| `getHeaderCollapsedClasses` | `header` | 读取并返回 `headerCollapsedClasses`。 | `component.getHeaderCollapsedClasses(...)` |
| `beginCollapse` | `` | 处理 `beginCollapse` 操作。 执行时会更新 `collapseMemento`、`width` 状态。源码涉及 `getSizeModel()`、`restoreDimension()`、`collapsedVertical()`、`getWidth()`。 | `component.beginCollapse()` |
| `beginExpand` | `` | 处理 `beginExpand` 操作。源码涉及 `restoreDimension()`、`isPlaceHolderCollapse()`、`getReExpander()`、`getHeaderCollapsedClasses()`。 | `component.beginExpand()` |
| `collapse` | `direction, animate` | 收起组件。 执行时会派发 `beforecollapse` 事件、更新 `collapsed` 状态。源码涉及 `fireEvent()`、`isPlaceHolderCollapse()`、`placeholderCollapse()`、`beginCollapse()`。 | `component.collapse(...)` |
| `doCollapseExpand` | `flags, animate` | 执行 `collapseExpand` 操作。 执行时会刷新界面或布局、更新 `animCollapse`、`isCollapsingOrExpanding` 状态。源码涉及 `addCls()`、`updateLayout()`。 | `component.doCollapseExpand(...)` |
| `afterCollapse` | `animated` | 在 `collapse` 后执行后处理。 执行时会派发 `collapse` 事件、更新 `isCollapsingOrExpanding` 状态。源码涉及 `updateCollapseTool()`、`removeCls()`、`setHiddenDocked()`、`fireEvent()`。 | `component.afterCollapse(...)` |
| `setHiddenDocked` | `` | 设置 `hiddenDocked`。源码涉及 `getDockedItems()`、`getReExpander()`。 | `component.setHiddenDocked()` |
| `restoreHiddenDocked` | `` | 还原 `hiddenDocked`。 | `component.restoreHiddenDocked()` |
| `getPlaceholder` | `direction` | 读取并返回 `placeholder`。 执行时会更新 `placeholder` 状态。源码涉及 `createReExpander()`、`lookupComponent()`。 | `component.getPlaceholder(...)` |
| `placeholderCollapse` | `direction, animate` | 处理 `placeholderCollapse` 操作。 执行时会派发 `collapse`、`collapse`、`collapse` 事件、更新 `isCollapsingOrExpanding`、`collapsed` 状态。源码涉及 `getPlaceholder()`、`setHiddenState()`、`convertCollapseDir()`、`fireEvent()`。 | `component.placeholderCollapse(...)` |
| `floatCollapsedPanel` | `` | 处理 `floatCollapsedPanel` 操作。 执行时会派发 `float` 事件、更新 `isSliding`、`collapsed` 状态。源码涉及 `slideOutFloatedPanel()`、`setHiddenState()`、`getBox()`、`setLocalXY()`。 | `component.floatCollapsedPanel()` |
| `onMouseLeaveFloated` | `e` | 处理 `mouseLeaveFloated` 回调。 | `component.onMouseLeaveFloated(...)` |
| `onMouseEnterFloated` | `e` | 处理 `mouseEnterFloated` 回调。 | `component.onMouseEnterFloated(...)` |
| `isLayoutRoot` | `` | 判断 `layoutRoot` 状态。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.isLayoutRoot()` |
| `slideOutFloatedPanel` | `preventAnimate` | 执行滑动 `outFloatedPanel`。 执行时会更新 `isSliding`、`floated` 状态。源码涉及 `slideOutFloatedPanelBegin()`、`convertCollapseDir()`、`slideOutFloatedPanelEnd()`。 | `component.slideOutFloatedPanel(...)` |
| `slideOutFloatedPanelBegin` | `` | 执行滑动 `outFloatedPanelBegin`。 执行时会更新 `collapsed`、`floatedFromCollapse` 状态。源码涉及 `setHiddenState()`。 | `component.slideOutFloatedPanelBegin()` |
| `slideOutFloatedPanelEnd` | `suppressEvents` | 执行滑动 `outFloatedPanelEnd`。 执行时会派发 `unfloat` 事件、更新 `isSliding` 状态。源码涉及 `fireEvent()`。 | `component.slideOutFloatedPanelEnd(...)` |
| `expand` | `animate` | 展开组件。 执行时会派发 `beforeexpand` 事件、更新 `collapsed` 状态。源码涉及 `fireEvent()`、`getHierarchyState()`、`isPlaceHolderCollapse()`、`placeholderExpand()`。 | `component.expand(...)` |
| `placeholderExpand` | `animate` | 处理 `placeholderExpand` 操作。 执行时会派发 `expand`、`expand`、`expand` 事件、刷新界面或布局、更新 `floated`、`collapsed` 状态。源码涉及 `getPosition()`、`slideOutFloatedPanelBegin()`、`slideOutFloatedPanelEnd()`、`setHiddenState()`。 | `component.placeholderExpand(...)` |
| `afterExpand` | `animated` | 在 `expand` 后执行后处理。 执行时会派发 `expand` 事件、更新 `isCollapsingOrExpanding` 状态。源码涉及 `updateCollapseTool()`、`removeCls()`、`fireEvent()`、`fireHierarchyEvent()`。 | `component.afterExpand(...)` |
| `setBorder` | `border, targetEl` | 设置 `border`。 执行时会刷新界面或布局、更新 `border` 状态。源码涉及 `unitizeBox()`、`updateLayout()`。 | `component.setBorder(...)` |
| `toggleCollapse` | `` | 切换 `collapse`。源码涉及 `expand()`、`collapse()`。 | `component.toggleCollapse()` |
| `getKeyMap` | `` | 读取并返回 `keyMap`。 执行时会更新 `keyMap` 状态。 | `component.getKeyMap()` |
| `initDraggable` | `` | 初始化 `draggable`。 执行时会更新 `dd` 状态。源码涉及 `initSimpleDraggable()`。 | `component.initDraggable()` |
| `initSimpleDraggable` | `` | 初始化 `simpleDraggable`。 执行时会更新 `dd` 状态。源码涉及 `updateHeader()`、`relayEvents()`。 | `component.initSimpleDraggable()` |
| `ghostTools` | `` | 处理 `ghostTools` 操作。 | `component.ghostTools()` |
| `ghost` | `cls` | 处理 `ghost` 操作。 执行时会更新 `ghostPanel` 状态。源码涉及 `getBox()`、`createGhost()`、`ghostTools()`。 | `component.ghost(...)` |
| `createGhost` | `cls` | 创建 `ghost`。源码涉及 `getRefOwner()`。 | `component.createGhost(...)` |
| `unghost` | `show, matchPosition` | 取消幽灵状态当前组件。源码涉及 `setPagePosition()`。 | `component.unghost(...)` |
| `beginDrag` | `` | 处理 `beginDrag` 操作。 | `component.beginDrag()` |
| `endDrag` | `` | 处理 `endDrag` 操作。 | `component.endDrag()` |
| `initResizable` | `` | 初始化 `resizable`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.initResizable()` |
| `convertCollapseDir` | `collapseDir` | 处理 `convertCollapseDir` 操作。 | `component.convertCollapseDir(...)` |
| `getAnimationProps` | `` | 读取并返回 `animationProps`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getAnimationProps()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforeclose` | 组件关闭前触发；监听器返回 `false` 可取消关闭。 源码在 `close()` 中通过 `fireEvent()` 触发。 | `listeners: { beforeclose: function () {} }` |
| `beforecollapse` | 组件收起前触发；监听器返回 `false` 可取消收起。 源码在 `collapse()` 中通过 `fireEvent()` 触发。 | `listeners: { beforecollapse: function () {} }` |
| `beforeexpand` | 组件展开前触发；监听器返回 `false` 可取消展开。 源码在 `expand()` 中通过 `fireEvent()` 触发。 | `listeners: { beforeexpand: function () {} }` |
| `close` | 组件关闭完成后触发。 源码在 `doClose()` 中通过 `fireEvent()` 触发。 | `listeners: { close: function () {} }` |
| `collapse` | 可折叠组件收起后触发。 源码在 `afterCollapse()`、`placeholderCollapse()` 中通过 `fireEvent()` 触发。 | `listeners: { collapse: function () {} }` |
| `expand` | 可展开组件展开后触发。 源码在 `placeholderExpand()`、`afterExpand()` 中通过 `fireEvent()` 触发。 | `listeners: { expand: function () {} }` |
| `float` | 折叠面板以浮动方式显示后触发。 源码在 `floatCollapsedPanel()` 中通过 `fireEvent()` 触发。 | `listeners: { float: function () {} }` |
| `glyphchange` | 组件字形图标改变后触发。 源码在 `setGlyph()` 中通过 `fireEvent()` 触发。 | `listeners: { glyphchange: function () {} }` |
| `iconchange` | 组件图标改变后触发。 源码在 `setIcon()` 中通过 `fireEvent()` 触发。 | `listeners: { iconchange: function () {} }` |
| `iconclschange` | 组件图标样式类改变后触发。 源码在 `setIconCls()` 中通过 `fireEvent()` 触发。 | `listeners: { iconclschange: function () {} }` |
| `titlechange` | 组件标题改变后触发。 源码在 `setTitle()` 中通过 `fireEvent()` 触发。 | `listeners: { titlechange: function () {} }` |
| `unfloat` | 浮动面板退出浮动状态后触发。 源码在 `slideOutFloatedPanelEnd()` 中通过 `fireEvent()` 触发。 | `listeners: { unfloat: function () {} }` |

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