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

源码定义：`ext-all-debug.js:142774`。分类：按钮、工具栏、菜单与标签页。

## 创建示例

```javascript
var component = Ext.create("Ext.tab.Panel", {
  xtype: "tabpanel",
  deferredRender: true,
  itemCls: Ext.baseCSSPrefix + 'tabpanel-child',
  maxTabWidth: undefined,
  minTabWidth: undefined,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `deferredRender` | `Boolean` | `true` | 控制是否启用 `deferredRender` 行为。 | `deferredRender: true` |
| `itemCls` | `Mixed` | `Ext.baseCSSPrefix + 'tabpanel-child'` | 配置 `itemCls` 对应的 CSS 类名。 | `itemCls: Ext.baseCSSPrefix + 'tabpanel-child'` |
| `maxTabWidth` | `Mixed` | `undefined` | 配置 `maxTabWidth` 限制值。 | `maxTabWidth: undefined` |
| `minTabWidth` | `Mixed` | `undefined` | 配置 `minTabWidth` 限制值。 | `minTabWidth: undefined` |
| `plain` | `Boolean` | `false` | 控制是否启用 `plain` 行为。 | `plain: false` |
| `removePanelHeader` | `Boolean` | `true` | 控制是否启用 `removePanelHeader` 行为。 | `removePanelHeader: true` |
| `tabPosition` | `String` | `'top'` | 配置组件的 `tabPosition` 选项。 | `tabPosition: 'top'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `activeTab`、`plugins` 状态。源码涉及 `addEvents()`、`callParent()`、`getComponent()`。 | `component.initComponent()` |
| `setActiveTab` | `card` | 设置 `activeTab`。 执行时会派发 `beforetabchange`、`tabchange` 事件、更新 `activeTab` 状态。源码涉及 `getComponent()`、`getActiveTab()`、`fireEvent()`、`add()`。 | `component.setActiveTab(...)` |
| `getActiveTab` | `` | 读取并返回 `activeTab`。 执行时会更新 `activeTab` 状态。源码涉及 `getComponent()`。 | `component.getActiveTab()` |
| `getTabBar` | `` | 读取并返回 `tabBar`。 | `component.getTabBar()` |
| `onAdd` | `item, index` | 处理 `add` 回调。 | `component.onAdd(...)` |
| `onItemEnable` | `item` | 处理 `itemEnable` 回调。 | `component.onItemEnable(...)` |
| `onItemDisable` | `item` | 处理 `itemDisable` 回调。 | `component.onItemDisable(...)` |
| `onItemBeforeShow` | `item` | 处理 `itemBeforeShow` 回调。源码涉及 `setActiveTab()`。 | `component.onItemBeforeShow(...)` |
| `onItemIconChange` | `item, newIcon` | 处理 `itemIconChange` 回调。 | `component.onItemIconChange(...)` |
| `onItemIconClsChange` | `item, newIconCls` | 处理 `itemIconClsChange` 回调。 | `component.onItemIconClsChange(...)` |
| `onItemTitleChange` | `item, newTitle` | 处理 `itemTitleChange` 回调。 | `component.onItemTitleChange(...)` |
| `doRemove` | `item, autoDestroy` | 执行 `remove` 操作。 执行时会保留父类默认行为、更新 `activeTab` 状态。源码涉及 `setActiveTab()`、`callParent()`。 | `component.doRemove(...)` |
| `onRemove` | `item, destroying` | 处理 `remove` 回调。 | `component.onRemove(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforetabchange` | 切换标签页前触发；监听器返回 `false` 可取消切换。 源码在 `setActiveTab()` 中通过 `fireEvent()` 触发。 | `listeners: { beforetabchange: function () {} }` |
| `tabchange` | 当前活动标签页改变后触发。 源码在 `setActiveTab()` 中通过 `fireEvent()` 触发。 | `listeners: { tabchange: function () {} }` |

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