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

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

## 创建示例

```javascript
var component = Ext.create("Ext.button.Button", {
  xtype: "button",
  _triggerRegion: {},
  ariaRole: 'button',
  arrowAlign: 'right',
  arrowCls: 'arrow',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `_triggerRegion` | `Object` | `{}` | 配置组件的 `_triggerRegion` 选项。 | `_triggerRegion: {}` |
| `ariaRole` | `String` | `'button'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'button'` |
| `arrowAlign` | `String` | `'right'` | 配置组件的 `arrowAlign` 选项。 | `arrowAlign: 'right'` |
| `arrowCls` | `String` | `'arrow'` | 配置 `arrowCls` 对应的 CSS 类名。 | `arrowCls: 'arrow'` |
| `autoEl` | `Object` | `{` | 配置组件的 `autoEl` 选项。 | `autoEl: {` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'btn'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'btn'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `clickEvent` | `String` | `'click'` | 配置组件的 `clickEvent` 选项。 | `clickEvent: 'click'` |
| `componentLayout` | `String` | `'button'` | 组件采用的内部布局策略。 | `componentLayout: 'button'` |
| `destroyMenu` | `Boolean` | `true` | 控制是否启用 `destroyMenu` 行为。 | `destroyMenu: true` |
| `disabled` | `Boolean` | `false` | 控制组件是否禁用。 | `disabled: false` |
| `enableToggle` | `Boolean` | `false` | 控制是否启用 `enableToggle` 行为。 | `enableToggle: false` |
| `focusCls` | `String` | `'focus'` | 配置 `focusCls` 对应的 CSS 类名。 | `focusCls: 'focus'` |
| `frame` | `Boolean` | `true` | 控制是否启用 `frame` 行为。 | `frame: true` |
| `handleMouseEvents` | `Boolean` | `true` | 控制是否启用 `handleMouseEvents` 行为。 | `handleMouseEvents: true` |
| `hidden` | `Boolean` | `false` | 控制组件初始是否隐藏。 | `hidden: false` |
| `hrefTarget` | `String` | `'_blank'` | 配置组件的 `hrefTarget` 选项。 | `hrefTarget: '_blank'` |
| `iconAlign` | `String` | `'left'` | 配置组件的 `iconAlign` 选项。 | `iconAlign: 'left'` |
| `isButton` | `Boolean` | `true` | 控制是否启用 `isButton` 行为。 | `isButton: true` |
| `maskOnDisable` | `Boolean` | `false` | 控制是否启用 `maskOnDisable` 行为。 | `maskOnDisable: false` |
| `menuActiveCls` | `String` | `'menu-active'` | 配置 `menuActiveCls` 对应的 CSS 类名。 | `menuActiveCls: 'menu-active'` |
| `menuAlign` | `String` | `'tl-bl?'` | 配置组件的 `menuAlign` 选项。 | `menuAlign: 'tl-bl?'` |
| `overCls` | `String` | `'over'` | 配置 `overCls` 对应的 CSS 类名。 | `overCls: 'over'` |
| `pressed` | `Boolean` | `false` | 控制是否启用 `pressed` 行为。 | `pressed: false` |
| `pressedCls` | `String` | `'pressed'` | 配置 `pressedCls` 对应的 CSS 类名。 | `pressedCls: 'pressed'` |
| `preventDefault` | `Boolean` | `true` | 控制是否启用 `preventDefault` 行为。 | `preventDefault: true` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `scale` | `String` | `'small'` | 配置组件的 `scale` 选项。 | `scale: 'small'` |
| `showEmptyMenu` | `Boolean` | `false` | 控制是否显示 `emptyMenu`。 | `showEmptyMenu: false` |
| `shrinkWrap` | `Number` | `3` | 配置组件的 `shrinkWrap` 选项。 | `shrinkWrap: 3` |
| `tabIndex` | `Number` | `0` | 配置组件的 `tabIndex` 选项。 | `tabIndex: 0` |
| `textAlign` | `String` | `'center'` | 配置组件的 `textAlign` 选项。 | `textAlign: 'center'` |
| `tooltipType` | `String` | `'qtip'` | 配置组件的 `tooltipType` 选项。 | `tooltipType: 'qtip'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `hasFrameTable` | `` | 检查是否存在 `frameTable`。 | `component.hasFrameTable()` |
| `frameTableListener` | `` | 处理 `frameTableListener` 操作。源码涉及 `doNavigate()`。 | `component.frameTableListener()` |
| `doNavigate` | `` | 执行 `navigate` 操作。源码涉及 `getHref()`。 | `component.doNavigate()` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `height`、`cls` 状态。源码涉及 `addCls()`、`callParent()`、`addEvents()`、`setMenu()`。 | `component.initComponent()` |
| `getActionEl` | `` | 读取并返回 `actionEl`。 | `component.getActionEl()` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。 | `component.getFocusEl()` |
| `setComponentCls` | `` | 设置 `componentCls`。 执行时会更新 `oldCls` 状态。源码涉及 `getComponentCls()`、`removeClsWithUI()`、`addClsWithUI()`。 | `component.setComponentCls()` |
| `getComponentCls` | `` | 读取并返回 `componentCls`。 | `component.getComponentCls()` |
| `getElConfig` | `` | 读取并返回 `elConfig`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`getHref()`。 | `component.getElConfig()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为、更新 `oldCls` 状态。源码涉及 `callParent()`、`getComponentCls()`、`addClsWithUI()`、`getTemplateArgs()`。 | `component.beforeRender()` |
| `setMenu` | `menu, destroyMenu` | 设置 `menu`。 执行时会刷新界面或布局、更新 `split`、`menu` 状态。源码涉及 `mon()`、`getSplitCls()`、`updateLayout()`。 | `component.setMenu(...)` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `doc`、`keyMap` 状态。源码涉及 `callParent()`、`setTooltip()`、`mon()`、`hasFrameTable()`。 | `component.onRender()` |
| `getTemplateArgs` | `` | 读取并返回 `templateArgs`。源码涉及 `getInnerCls()`、`getSplitCls()`。 | `component.getTemplateArgs()` |
| `setHref` | `href` | 设置 `href`。 执行时会更新 `href` 状态。源码涉及 `getHref()`。 | `component.setHref(...)` |
| `getHref` | `` | 读取并返回 `href`。 | `component.getHref()` |
| `setParams` | `params` | 设置 `params`。 执行时会更新 `params` 状态。源码涉及 `getHref()`。 | `component.setParams(...)` |
| `getSplitCls` | `` | 读取并返回 `splitCls`。 | `component.getSplitCls()` |
| `getInnerCls` | `` | 读取并返回 `innerCls`。 | `component.getInnerCls()` |
| `setIcon` | `icon` | 设置 `icon`。 执行时会派发 `iconchange` 事件、刷新界面或布局、更新 `icon` 状态。源码涉及 `setComponentCls()`、`didIconStateChange()`、`updateLayout()`、`fireEvent()`。 | `component.setIcon(...)` |
| `setIconCls` | `cls` | 设置 `iconCls`。 执行时会派发 `iconchange` 事件、刷新界面或布局、更新 `iconCls` 状态。源码涉及 `setComponentCls()`、`didIconStateChange()`、`updateLayout()`、`fireEvent()`。 | `component.setIconCls(...)` |
| `setGlyph` | `glyph` | 设置 `glyph`。 执行时会派发 `glyphchange` 事件、更新 `glyph` 状态。源码涉及 `fireEvent()`。 | `component.setGlyph(...)` |
| `setTooltip` | `tooltip, initial` | 设置 `tooltip`。 执行时会更新 `tooltip` 状态。源码涉及 `clearTip()`、`getTipAttr()`。 | `component.setTooltip(...)` |
| `setTextAlign` | `align` | 设置 `textAlign`。 执行时会更新 `textAlign` 状态。 | `component.setTextAlign(...)` |
| `getTipAttr` | `` | 读取并返回 `tipAttr`。 | `component.getTipAttr()` |
| `getRefItems` | `deep` | 读取并返回 `refItems`。 | `component.getRefItems(...)` |
| `clearTip` | `` | 清空 `tip`。源码涉及 `getTipAttr()`。 | `component.clearTip()` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `clearTip()`、`callParent()`。 | `component.beforeDestroy()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `setHandler` | `handler, scope` | 设置 `handler`。 执行时会更新 `handler`、`scope` 状态。 | `component.setHandler(...)` |
| `setText` | `text` | 设置 `text`。 执行时会派发 `textchange` 事件、刷新界面或布局、更新 `text` 状态。源码涉及 `setComponentCls()`、`updateLayout()`、`fireEvent()`。 | `component.setText(...)` |
| `didIconStateChange` | `old, current` | 处理 `didIconStateChange` 操作。 | `component.didIconStateChange(...)` |
| `getText` | `` | 读取并返回 `text`。 | `component.getText()` |
| `toggle` | `state, suppressEvent` | 切换当前组件。 执行时会派发 `toggle` 事件、更新 `pressed` 状态。源码涉及 `fireEvent()`。 | `component.toggle(...)` |
| `maybeShowMenu` | `` | 处理 `maybeShowMenu` 操作。源码涉及 `hasVisibleMenu()`、`showMenu()`。 | `component.maybeShowMenu()` |
| `showMenu` | `fromEvent` | 显示 `menu`。源码涉及 `getTipAttr()`。 | `component.showMenu(...)` |
| `hideMenu` | `` | 隐藏 `menu`。源码涉及 `hasVisibleMenu()`。 | `component.hideMenu()` |
| `hasVisibleMenu` | `` | 检查是否存在 `visibleMenu`。 | `component.hasVisibleMenu()` |
| `onRepeatClick` | `repeat, e` | 处理 `repeatClick` 回调。源码涉及 `onClick()`。 | `component.onRepeatClick(...)` |
| `onClick` | `e` | 处理 `click` 回调。源码涉及 `doPreventDefault()`、`doToggle()`、`maybeShowMenu()`、`fireHandler()`。 | `component.onClick(...)` |
| `doPreventDefault` | `e` | 执行 `preventDefault` 操作。源码涉及 `getHref()`。 | `component.doPreventDefault(...)` |
| `fireHandler` | `e` | 触发 `handler`。 执行时会派发 `click` 事件。源码涉及 `fireEvent()`、`blur()`。 | `component.fireHandler(...)` |
| `doToggle` | `` | 执行 `toggle` 操作。源码涉及 `toggle()`。 | `component.doToggle()` |
| `onMouseOver` | `e` | 处理 `mouseOver` 回调。源码涉及 `onMouseEnter()`。 | `component.onMouseOver(...)` |
| `onMouseOut` | `e` | 处理 `mouseOut` 回调。源码涉及 `onMenuTriggerOut()`、`onMouseLeave()`。 | `component.onMouseOut(...)` |
| `onMouseMove` | `e` | 处理 `mouseMove` 回调。源码涉及 `getX()`、`getTriggerRegion()`、`onMenuTriggerOver()`、`onMenuTriggerOut()`。 | `component.onMouseMove(...)` |
| `getTriggerRegion` | `` | 读取并返回 `triggerRegion`。源码涉及 `getTriggerSize()`、`getWidth()`、`getHeight()`。 | `component.getTriggerRegion()` |
| `getTriggerSize` | `` | 读取并返回 `triggerSize`。 执行时会更新 `triggerSize` 状态。源码涉及 `getBtnWrapFrameWidth()`。 | `component.getTriggerSize()` |
| `getBtnWrapFrameWidth` | `side` | 读取并返回 `btnWrapFrameWidth`。 | `component.getBtnWrapFrameWidth(...)` |
| `addOverCls` | `` | 添加 `overCls`。源码涉及 `addClsWithUI()`。 | `component.addOverCls()` |
| `removeOverCls` | `` | 移除 `overCls`。源码涉及 `removeClsWithUI()`。 | `component.removeOverCls()` |
| `onMouseEnter` | `e` | 处理 `mouseEnter` 回调。 执行时会派发 `mouseover` 事件。源码涉及 `fireEvent()`。 | `component.onMouseEnter(...)` |
| `onMouseLeave` | `e` | 处理 `mouseLeave` 回调。 执行时会派发 `mouseout` 事件。源码涉及 `fireEvent()`。 | `component.onMouseLeave(...)` |
| `onMenuTriggerOver` | `e` | 处理 `menuTriggerOver` 回调。 执行时会派发 `menutriggerover` 事件、更新 `overMenuTrigger` 状态。源码涉及 `getTipAttr()`、`fireEvent()`。 | `component.onMenuTriggerOver(...)` |
| `onMenuTriggerOut` | `e` | 处理 `menuTriggerOut` 回调。 执行时会派发 `menutriggerout` 事件。源码涉及 `getTipAttr()`、`fireEvent()`。 | `component.onMenuTriggerOut(...)` |
| `enable` | `silent` | 启用组件。 执行时会保留父类默认行为。源码涉及 `callParent()`、`removeClsWithUI()`。 | `component.enable(...)` |
| `disable` | `silent` | 禁用组件。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addClsWithUI()`、`removeClsWithUI()`。 | `component.disable(...)` |
| `setScale` | `scale` | 设置 `scale`。 执行时会更新 `scale` 状态。源码涉及 `setUI()`。 | `component.setScale(...)` |
| `setUI` | `ui` | 设置 `uI`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.setUI(...)` |
| `onMouseDown` | `e` | 处理 `mouseDown` 回调。源码涉及 `getFocusEl()`、`addClsWithUI()`。 | `component.onMouseDown(...)` |
| `onMouseUp` | `e` | 处理 `mouseUp` 回调。源码涉及 `removeClsWithUI()`。 | `component.onMouseUp(...)` |
| `onMenuShow` | `e` | 处理 `menuShow` 回调。 执行时会派发 `menushow` 事件、更新 `ignoreNextClick` 状态。源码涉及 `addClsWithUI()`、`fireEvent()`。 | `component.onMenuShow(...)` |
| `onMenuHide` | `e` | 处理 `menuHide` 回调。 执行时会派发 `menuhide` 事件、更新 `ignoreNextClick` 状态。源码涉及 `removeClsWithUI()`、`fireEvent()`、`focus()`。 | `component.onMenuHide(...)` |
| `restoreClick` | `` | 还原 `click`。 执行时会更新 `ignoreNextClick` 状态。 | `component.restoreClick()` |
| `onDownKey` | `k, e` | 处理 `downKey` 回调。源码涉及 `showMenu()`。 | `component.onDownKey(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `click` | 用户点击组件时触发。 源码在 `fireHandler()` 中通过 `fireEvent()` 触发。 | `listeners: { click: function () {} }` |
| `glyphchange` | 组件字形图标改变后触发。 源码在 `setGlyph()` 中通过 `fireEvent()` 触发。 | `listeners: { glyphchange: function () {} }` |
| `iconchange` | 组件图标改变后触发。 源码在 `setIcon()`、`setIconCls()` 中通过 `fireEvent()` 触发。 | `listeners: { iconchange: function () {} }` |
| `menuhide` | 菜单隐藏后触发。 源码在 `onMenuHide()` 中通过 `fireEvent()` 触发。 | `listeners: { menuhide: function () {} }` |
| `menushow` | 菜单显示后触发。 源码在 `onMenuShow()` 中通过 `fireEvent()` 触发。 | `listeners: { menushow: function () {} }` |
| `menutriggerout` | 鼠标移出菜单触发区域时触发。 源码在 `onMenuTriggerOut()` 中通过 `fireEvent()` 触发。 | `listeners: { menutriggerout: function () {} }` |
| `menutriggerover` | 鼠标移入菜单触发区域时触发。 源码在 `onMenuTriggerOver()` 中通过 `fireEvent()` 触发。 | `listeners: { menutriggerover: function () {} }` |
| `mouseout` | 鼠标移出组件时触发。 源码在 `onMouseLeave()` 中通过 `fireEvent()` 触发。 | `listeners: { mouseout: function () {} }` |
| `mouseover` | 鼠标移动到组件上方时触发。 源码在 `onMouseEnter()` 中通过 `fireEvent()` 触发。 | `listeners: { mouseover: function () {} }` |
| `textchange` | 输入文本变化后触发。 源码在 `setText()` 中通过 `fireEvent()` 触发。 | `listeners: { textchange: function () {} }` |
| `toggle` | 组件切换按下或选中状态后触发。 源码在 `toggle()` 中通过 `fireEvent()` 触发。 | `listeners: { toggle: function () {} }` |

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