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

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

## 创建示例

```javascript
var component = Ext.create("Ext.panel.Tool", {
  xtype: "tool",
  ariaRole: 'button',
  baseCls: Ext.baseCSSPrefix + 'tool',
  childEls: [,
  disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'button'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'button'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'tool'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'tool'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `disabledCls` | `Mixed` | `Ext.baseCSSPrefix + 'tool-disabled'` | 配置 `disabledCls` 对应的 CSS 类名。 | `disabledCls: Ext.baseCSSPrefix + 'tool-disabled'` |
| `height` | `Number` | `15` | 组件高度。 | `height: 15` |
| `isTool` | `Boolean` | `true` | 控制是否启用 `isTool` 行为。 | `isTool: true` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `stopEvent` | `Boolean` | `true` | 控制是否启用 `stopEvent` 行为。 | `stopEvent: true` |
| `toolOverCls` | `Mixed` | `Ext.baseCSSPrefix + 'tool-over'` | 配置 `toolOverCls` 对应的 CSS 类名。 | `toolOverCls: Ext.baseCSSPrefix + 'tool-over'` |
| `toolOwner` | `Object/null` | `null` | 配置组件的 `toolOwner` 选项。 | `toolOwner: null` |
| `toolPressedCls` | `Mixed` | `Ext.baseCSSPrefix + 'tool-pressed'` | 配置 `toolPressedCls` 对应的 CSS 类名。 | `toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed'` |
| `tooltipType` | `String` | `'qtip'` | 配置组件的 `tooltipType` 选项。 | `tooltipType: 'qtip'` |
| `width` | `Number` | `15` | 组件宽度。 | `width: 15` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `height`、`width` 状态。源码涉及 `addEvents()`、`callParent()`。 | `component.initComponent()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.afterRender()` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。 | `component.getFocusEl()` |
| `setType` | `type` | 设置 `type`。 执行时会更新 `type` 状态。 | `component.setType(...)` |
| `onClick` | `e, target` | 处理 `click` 回调。 执行时会派发 `click` 事件。源码涉及 `fireEvent()`。 | `component.onClick(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `onMouseDown` | `` | 处理 `mouseDown` 回调。 | `component.onMouseDown()` |
| `onMouseOver` | `` | 处理 `mouseOver` 回调。 | `component.onMouseOver()` |
| `onMouseOut` | `` | 处理 `mouseOut` 回调。 | `component.onMouseOut()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `click` | 用户点击组件时触发。 源码在 `onClick()` 中通过 `fireEvent()` 触发。 | `listeners: { click: function () {} }` |

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