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

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

## 创建示例

```javascript
var component = Ext.create("Ext.tab.Tab", {
  xtype: "tab",
  active: false,
  activeCls: 'active',
  ariaRole: 'tab',
  baseCls: Ext.baseCSSPrefix + 'tab',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `active` | `Boolean` | `false` | 控制是否启用 `active` 行为。 | `active: false` |
| `activeCls` | `String` | `'active'` | 配置 `activeCls` 对应的 CSS 类名。 | `activeCls: 'active'` |
| `ariaRole` | `String` | `'tab'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'tab'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'tab'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'tab'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `closable` | `Boolean` | `true` | 控制组件是否显示关闭操作。 | `closable: true` |
| `closableCls` | `String` | `'closable'` | 配置 `closableCls` 对应的 CSS 类名。 | `closableCls: 'closable'` |
| `closeElOverCls` | `Mixed` | `Ext.baseCSSPrefix + 'tab-close-btn-over'` | 配置 `closeElOverCls` 对应的 CSS 类名。 | `closeElOverCls: Ext.baseCSSPrefix + 'tab-close-btn-over'` |
| `closeText` | `String` | `'Close Tab'` | 配置组件的 `closeText` 选项。 | `closeText: 'Close Tab'` |
| `isTab` | `Boolean` | `true` | 控制是否启用 `isTab` 行为。 | `isTab: true` |
| `position` | `String` | `'top'` | 配置组件的 `position` 选项。 | `position: 'top'` |
| `scale` | `Boolean` | `false` | 控制是否启用 `scale` 行为。 | `scale: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `overCls` 状态。源码涉及 `addEvents()`、`callParent()`、`setCard()`。 | `component.initComponent()` |
| `getTemplateArgs` | `` | 读取并返回 `templateArgs`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getTemplateArgs()` |
| `getFramingInfoCls` | `` | 读取并返回 `framingInfoCls`。 | `component.getFramingInfoCls()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为、同步关联状态、更新 `minWidth`、`maxWidth` 状态。源码涉及 `up()`、`callParent()`、`addClsWithUI()`、`syncClosableUI()`。 | `component.beforeRender()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `setElOrientation()`、`callParent()`、`initKeyNav()`。 | `component.onRender()` |
| `initKeyNav` | `` | 初始化 `keyNav`。 执行时会更新 `keyNav` 状态。 | `component.initKeyNav()` |
| `setElOrientation` | `` | 设置 `elOrientation`。 | `component.setElOrientation()` |
| `enable` | `silent` | 启用组件。 执行时会保留父类默认行为。源码涉及 `callParent()`、`removeClsWithUI()`。 | `component.enable(...)` |
| `disable` | `silent` | 禁用组件。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addClsWithUI()`。 | `component.disable(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `setClosable` | `closable` | 设置 `closable`。 执行时会刷新界面或布局、同步关联状态、更新 `closable` 状态。源码涉及 `syncClosableUI()`、`syncClosableElements()`、`updateLayout()`。 | `component.setClosable(...)` |
| `syncClosableElements` | `` | 同步 `closableElements`。 执行时会更新 `closeEl` 状态。 | `component.syncClosableElements()` |
| `syncClosableUI` | `` | 同步 `closableUI`。源码涉及 `addClsWithUI()`、`removeClsWithUI()`。 | `component.syncClosableUI()` |
| `setCard` | `card` | 设置 `card`。 执行时会更新 `card` 状态。源码涉及 `setText()`、`setIconCls()`、`setIcon()`、`setGlyph()`。 | `component.setCard(...)` |
| `onCloseClick` | `` | 处理 `closeClick` 回调。 执行时会派发 `beforeclose` 事件。源码涉及 `fireEvent()`、`fireClose()`。 | `component.onCloseClick()` |
| `fireClose` | `` | 触发 `close`。 执行时会派发 `close` 事件。源码涉及 `fireEvent()`。 | `component.fireClose()` |
| `onEnterKey` | `e` | 处理 `enterKey` 回调。 | `component.onEnterKey(...)` |
| `onDeleteKey` | `e` | 处理 `deleteKey` 回调。源码涉及 `onCloseClick()`。 | `component.onDeleteKey(...)` |
| `afterClick` | `isCloseClick` | 在 `click` 后执行后处理。源码涉及 `focus()`。 | `component.afterClick(...)` |
| `activate` | `supressEvent` | 激活当前组件。 执行时会派发 `activate` 事件、更新 `active` 状态。源码涉及 `addClsWithUI()`、`fireEvent()`。 | `component.activate(...)` |
| `deactivate` | `supressEvent` | 停用当前组件。 执行时会派发 `deactivate` 事件、更新 `active` 状态。源码涉及 `removeClsWithUI()`、`fireEvent()`。 | `component.deactivate(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `activate` | 组件首次获得活动状态时触发。 源码在 `activate()` 中通过 `fireEvent()` 触发。 | `listeners: { activate: function () {} }` |
| `beforeclose` | 组件关闭前触发；监听器返回 `false` 可取消关闭。 源码在 `onCloseClick()` 中通过 `fireEvent()` 触发。 | `listeners: { beforeclose: function () {} }` |
| `close` | 组件关闭完成后触发。 源码在 `fireClose()` 中通过 `fireEvent()` 触发。 | `listeners: { close: function () {} }` |
| `deactivate` | 组件失去活动状态时触发。 源码在 `deactivate()` 中通过 `fireEvent()` 触发。 | `listeners: { deactivate: function () {} }` |

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