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

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

## 创建示例

```javascript
var component = Ext.create("Ext.toolbar.Toolbar", {
  xtype: "toolbar",
  ariaRole: 'toolbar',
  baseCls: Ext.baseCSSPrefix + 'toolbar',
  defaultType: 'button',
  enableOverflow: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'toolbar'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'toolbar'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'toolbar'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'toolbar'` |
| `defaultType` | `String` | `'button'` | 配置组件的 `defaultType` 选项。 | `defaultType: 'button'` |
| `enableOverflow` | `Boolean` | `false` | 控制是否启用 `enableOverflow` 行为。 | `enableOverflow: false` |
| `isToolbar` | `Boolean` | `true` | 控制是否启用 `isToolbar` 行为。 | `isToolbar: true` |
| `itemCls` | `Mixed` | `Ext.baseCSSPrefix + 'toolbar-item'` | 配置 `itemCls` 对应的 CSS 类名。 | `itemCls: Ext.baseCSSPrefix + 'toolbar-item'` |
| `menuTriggerCls` | `Mixed` | `Ext.baseCSSPrefix + 'toolbar-more-icon'` | 配置 `menuTriggerCls` 对应的 CSS 类名。 | `menuTriggerCls: Ext.baseCSSPrefix + 'toolbar-more-icon'` |
| `trackMenus` | `Boolean` | `true` | 控制是否启用 `trackMenus` 行为。 | `trackMenus: true` |
| `vertical` | `Boolean` | `false` | 控制组件是否以垂直方向显示。 | `vertical: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `layout`、`vertical` 状态。源码涉及 `addClsWithUI()`、`callParent()`、`addEvents()`。 | `component.initComponent()` |
| `getRefItems` | `deep` | 读取并返回 `refItems`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getRefItems(...)` |
| `lookupComponent` | `c` | 查找 `component`。 执行时会保留父类默认行为。源码涉及 `applyDefaults()`、`callParent()`。 | `component.lookupComponent(...)` |
| `applyDefaults` | `c` | 应用 `defaults`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.applyDefaults(...)` |
| `trackMenu` | `item, remove` | 跟踪 `menu`。 | `component.trackMenu(...)` |
| `onBeforeAdd` | `component` | 处理 `beforeAdd` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onBeforeAdd(...)` |
| `onAdd` | `component` | 处理 `add` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`trackMenu()`。 | `component.onAdd(...)` |
| `onRemove` | `c` | 处理 `remove` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`trackMenu()`。 | `component.onRemove(...)` |
| `getChildItemsToDisable` | `` | 将 `getChildItems` 转换为 `disable`。 | `component.getChildItemsToDisable()` |
| `onButtonOver` | `btn` | 处理 `buttonOver` 回调。 执行时会更新 `activeMenuBtn` 状态。 | `component.onButtonOver(...)` |
| `onButtonMenuShow` | `btn` | 处理 `buttonMenuShow` 回调。 执行时会更新 `activeMenuBtn` 状态。 | `component.onButtonMenuShow(...)` |
| `onButtonMenuHide` | `btn` | 处理 `buttonMenuHide` 回调。 | `component.onButtonMenuHide(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `overflowchange` | 工具栏溢出状态变化后触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { overflowchange: function () {} }` |

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