---
title: "Ext.menu.Item"
description: "xtype 为 menuitem 的 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.menu.Item

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

## 创建示例

```javascript
var component = Ext.create("Ext.menu.Item", {
  xtype: "menuitem",
  activeCls: Ext.baseCSSPrefix + 'menu-item-active',
  ariaRole: 'menuitem',
  arrowCls: Ext.baseCSSPrefix + 'menu-item-arrow',
  baseIconCls: Ext.baseCSSPrefix + 'menu-item-icon',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `activeCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-active'` | 配置 `activeCls` 对应的 CSS 类名。 | `activeCls: Ext.baseCSSPrefix + 'menu-item-active'` |
| `ariaRole` | `String` | `'menuitem'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'menuitem'` |
| `arrowCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-arrow'` | 配置 `arrowCls` 对应的 CSS 类名。 | `arrowCls: Ext.baseCSSPrefix + 'menu-item-arrow'` |
| `baseIconCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-icon'` | 配置 `baseIconCls` 对应的 CSS 类名。 | `baseIconCls: Ext.baseCSSPrefix + 'menu-item-icon'` |
| `canActivate` | `Boolean` | `true` | 控制是否启用 `canActivate` 行为。 | `canActivate: true` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `clickHideDelay` | `Number` | `0` | 配置组件的 `clickHideDelay` 选项。 | `clickHideDelay: 0` |
| `destroyMenu` | `Boolean` | `true` | 控制是否启用 `destroyMenu` 行为。 | `destroyMenu: true` |
| `disabledCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-disabled'` | 配置 `disabledCls` 对应的 CSS 类名。 | `disabledCls: Ext.baseCSSPrefix + 'menu-item-disabled'` |
| `hideOnClick` | `Boolean` | `true` | 控制是否隐藏 `onClick`。 | `hideOnClick: true` |
| `iconAlign` | `String` | `'left'` | 配置组件的 `iconAlign` 选项。 | `iconAlign: 'left'` |
| `indentCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-indent'` | 配置 `indentCls` 对应的 CSS 类名。 | `indentCls: Ext.baseCSSPrefix + 'menu-item-indent'` |
| `indentNoSeparatorCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-indent-no-sepa...` | 配置 `indentNoSeparatorCls` 对应的 CSS 类名。 | `indentNoSeparatorCls: Ext.baseCSSPrefix + 'menu-item-indent-no-sepa...` |
| `indentRightArrowCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-indent-right-a...` | 配置 `indentRightArrowCls` 对应的 CSS 类名。 | `indentRightArrowCls: Ext.baseCSSPrefix + 'menu-item-indent-right-a...` |
| `indentRightIconCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-indent-right-i...` | 配置 `indentRightIconCls` 对应的 CSS 类名。 | `indentRightIconCls: Ext.baseCSSPrefix + 'menu-item-indent-right-i...` |
| `isMenuItem` | `Boolean` | `true` | 控制是否启用 `isMenuItem` 行为。 | `isMenuItem: true` |
| `linkCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-link'` | 配置 `linkCls` 对应的 CSS 类名。 | `linkCls: Ext.baseCSSPrefix + 'menu-item-link'` |
| `maskOnDisable` | `Boolean` | `false` | 控制是否启用 `maskOnDisable` 行为。 | `maskOnDisable: false` |
| `menuAlign` | `String` | `'tl-tr?'` | 配置组件的 `menuAlign` 选项。 | `menuAlign: 'tl-tr?'` |
| `menuExpandDelay` | `Number` | `200` | 配置组件的 `menuExpandDelay` 选项。 | `menuExpandDelay: 200` |
| `menuHideDelay` | `Number` | `200` | 配置组件的 `menuHideDelay` 选项。 | `menuHideDelay: 200` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `textCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-text'` | 配置 `textCls` 对应的 CSS 类名。 | `textCls: Ext.baseCSSPrefix + 'menu-item-text'` |
| `tooltipType` | `String` | `'qtip'` | 配置组件的 `tooltipType` 选项。 | `tooltipType: 'qtip'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `activate` | `skipCheck` | 激活当前组件。 执行时会派发 `activate` 事件、更新 `activated` 状态。源码涉及 `isDisabled()`、`isVisible()`、`focus()`、`fireEvent()`。 | `component.activate(...)` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。 | `component.getFocusEl()` |
| `deactivate` | `` | 停用当前组件。 执行时会派发 `deactivate` 事件、更新 `activated` 状态。源码涉及 `up()`、`hideMenu()`、`fireEvent()`。 | `component.deactivate()` |
| `deferHideMenu` | `` | 处理 `deferHideMenu` 操作。 | `component.deferHideMenu()` |
| `cancelDeferHide` | `` | 取消 `deferHide`。 | `component.cancelDeferHide()` |
| `deferHideParentMenus` | `` | 处理 `deferHideParentMenus` 操作。源码涉及 `up()`。 | `component.deferHideParentMenus()` |
| `expandMenu` | `delay` | 展开 `menu`。 执行时会更新 `expandMenuTimer` 状态。源码涉及 `cancelDeferHide()`、`doExpandMenu()`。 | `component.expandMenu(...)` |
| `doExpandMenu` | `` | 执行 `expandMenu` 操作。 | `component.doExpandMenu()` |
| `getRefItems` | `deep` | 读取并返回 `refItems`。 | `component.getRefItems(...)` |
| `hideMenu` | `delay` | 隐藏 `menu`。 执行时会更新 `hideMenuTimer` 状态。 | `component.hideMenu(...)` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `cls` 状态。源码涉及 `addEvents()`、`setMenu()`、`callParent()`。 | `component.initComponent()` |
| `onClick` | `e` | 处理 `click` 回调。 执行时会派发 `click` 事件、更新 `deferHideParentMenusTimer`、`handlingClick` 状态。源码涉及 `deferHideParentMenus()`、`fireEvent()`、`focus()`。 | `component.onClick(...)` |
| `onRemoved` | `` | 处理 `removed` 回调。 执行时会保留父类默认行为、更新 `parentMenu`、`ownerCmp` 状态。源码涉及 `callParent()`。 | `component.onRemoved()` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `clearTip()`、`callParent()`。 | `component.beforeDestroy()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `cancelDeferHide()`、`setMenu()`、`callParent()`。 | `component.onDestroy()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.beforeRender()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`、`setTooltip()`。 | `component.onRender()` |
| `setMenu` | `menu, destroyMenu` | 设置 `menu`。 执行时会更新 `menu` 状态。 | `component.setMenu(...)` |
| `setHandler` | `fn, scope` | 设置 `handler`。 执行时会更新 `handler`、`scope` 状态。 | `component.setHandler(...)` |
| `setIcon` | `icon` | 设置 `icon`。 执行时会派发 `iconchange` 事件、更新 `icon` 状态。源码涉及 `fireEvent()`。 | `component.setIcon(...)` |
| `setIconCls` | `iconCls` | 设置 `iconCls`。 执行时会派发 `iconchange` 事件、更新 `iconCls` 状态。源码涉及 `fireEvent()`。 | `component.setIconCls(...)` |
| `setText` | `text` | 设置 `text`。 执行时会派发 `textchange` 事件、更新 `text` 状态。源码涉及 `fireEvent()`。 | `component.setText(...)` |
| `getTipAttr` | `` | 读取并返回 `tipAttr`。 | `component.getTipAttr()` |
| `clearTip` | `` | 清空 `tip`。 | `component.clearTip()` |
| `setTooltip` | `tooltip, initial` | 设置 `tooltip`。 执行时会更新 `tooltip` 状态。源码涉及 `clearTip()`、`getTipAttr()`。 | `component.setTooltip(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `activate` | 组件首次获得活动状态时触发。 源码在 `activate()` 中通过 `fireEvent()` 触发。 | `listeners: { activate: function () {} }` |
| `click` | 用户点击组件时触发。 源码在 `onClick()` 中通过 `fireEvent()` 触发。 | `listeners: { click: function () {} }` |
| `deactivate` | 组件失去活动状态时触发。 源码在 `deactivate()` 中通过 `fireEvent()` 触发。 | `listeners: { deactivate: function () {} }` |
| `iconchange` | 组件图标改变后触发。 源码在 `setIcon()`、`setIconCls()` 中通过 `fireEvent()` 触发。 | `listeners: { iconchange: function () {} }` |
| `textchange` | 输入文本变化后触发。 源码在 `setText()` 中通过 `fireEvent()` 触发。 | `listeners: { textchange: function () {} }` |

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