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

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

## 创建示例

```javascript
var component = Ext.create("Ext.tab.Bar", {
  xtype: "tabbar",
  _reverseDockNames: {,
  ariaRole: 'tablist',
  baseCls: Ext.baseCSSPrefix + 'tab-bar',
  childEls: [,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `_reverseDockNames` | `Object` | `{` | 配置组件的 `_reverseDockNames` 选项。 | `_reverseDockNames: {` |
| `ariaRole` | `String` | `'tablist'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'tablist'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'tab-bar'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'tab-bar'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `defaultType` | `String` | `'tab'` | 配置组件的 `defaultType` 选项。 | `defaultType: 'tab'` |
| `isTabBar` | `Boolean` | `true` | 控制是否启用 `isTabBar` 行为。 | `isTabBar: true` |
| `plain` | `Boolean` | `false` | 控制是否启用 `plain` 行为。 | `plain: false` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为。源码涉及 `addCls()`、`addClsWithUI()`、`addEvents()`、`callParent()`。 | `component.initComponent()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onRender()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.afterRender()` |
| `afterLayout` | `` | 在 `layout` 后执行后处理。 执行时会保留父类默认行为。源码涉及 `adjustTabPositions()`、`callParent()`。 | `component.afterLayout()` |
| `adjustTabPositions` | `` | 调整 `tabPositions`。 | `component.adjustTabPositions()` |
| `getLayout` | `` | 读取并返回 `layout`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getLayout()` |
| `onAdd` | `tab` | 处理 `add` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onAdd(...)` |
| `onRemove` | `tab` | 处理 `remove` 回调。 执行时会保留父类默认行为、更新 `previousTab` 状态。源码涉及 `callParent()`。 | `component.onRemove(...)` |
| `afterComponentLayout` | `width` | 在 `componentLayout` 后执行后处理。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.afterComponentLayout(...)` |
| `onClick` | `e, target` | 处理 `click` 回调。源码涉及 `getTabInfoFromPoint()`、`setActiveTab()`。 | `component.onClick(...)` |
| `onMouseMove` | `e` | 处理 `mouseMove` 回调。 执行时会更新 `_overTab` 状态。源码涉及 `getTabInfoFromPoint()`。 | `component.onMouseMove(...)` |
| `onMouseLeave` | `e` | 处理 `mouseLeave` 回调。 | `component.onMouseLeave(...)` |
| `getTabInfoFromPoint` | `xy` | 读取并返回 `tabInfoFromPoint`。 执行时会更新 `_isTabReversed` 状态。源码涉及 `getCloseXY()`。 | `component.getTabInfoFromPoint(...)` |
| `getCloseXY` | `closeEl, tabX, tabY, tabWidth, tabHeight, closeWidth, closeHeight, direction` | 读取并返回 `closeXY`。 | `component.getCloseXY(...)` |
| `closeTab` | `toClose` | 处理 `closeTab` 操作。源码涉及 `findNextActivatable()`、`remove()`、`setActiveTab()`。 | `component.closeTab(...)` |
| `findNextActivatable` | `toClose` | 查找 `nextActivatable`。 | `component.findNextActivatable(...)` |
| `setActiveTab` | `tab, initial` | 设置 `activeTab`。 执行时会派发 `change` 事件、刷新界面或布局、更新 `previousTab`、`activeTab` 状态。源码涉及 `fireEvent()`、`updateLayout()`。 | `component.setActiveTab(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `change` | 组件值发生变化时触发。 源码在 `setActiveTab()` 中通过 `fireEvent()` 触发。 | `listeners: { change: function () {} }` |

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