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

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

## 创建示例

```javascript
var component = Ext.create("Ext.menu.CheckItem", {
  xtype: "menucheckitem",
  ariaRole: 'menuitemcheckbox',
  checkboxCls: Ext.baseCSSPrefix + 'menu-item-checkbox',
  checkChangeDisabled: false,
  checkedCls: Ext.baseCSSPrefix + 'menu-item-checked',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'menuitemcheckbox'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'menuitemcheckbox'` |
| `checkboxCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-checkbox'` | 配置 `checkboxCls` 对应的 CSS 类名。 | `checkboxCls: Ext.baseCSSPrefix + 'menu-item-checkbox'` |
| `checkChangeDisabled` | `Boolean` | `false` | 控制是否启用 `checkChangeDisabled` 行为。 | `checkChangeDisabled: false` |
| `checkedCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-checked'` | 配置 `checkedCls` 对应的 CSS 类名。 | `checkedCls: Ext.baseCSSPrefix + 'menu-item-checked'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `groupCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-group-icon'` | 配置 `groupCls` 对应的 CSS 类名。 | `groupCls: Ext.baseCSSPrefix + 'menu-group-icon'` |
| `hideOnClick` | `Boolean` | `false` | 控制是否隐藏 `onClick`。 | `hideOnClick: false` |
| `isMenuCheckItem` | `Boolean` | `true` | 控制是否启用 `isMenuCheckItem` 行为。 | `isMenuCheckItem: true` |
| `showCheckbox` | `Boolean` | `true` | 控制是否显示 `checkbox`。 | `showCheckbox: true` |
| `uncheckedCls` | `Mixed` | `Ext.baseCSSPrefix + 'menu-item-unchecked'` | 配置 `uncheckedCls` 对应的 CSS 类名。 | `uncheckedCls: Ext.baseCSSPrefix + 'menu-item-unchecked'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `checked`、`hideOnClick` 状态。源码涉及 `addEvents()`、`callParent()`。 | `component.initComponent()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.beforeRender()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为、更新 `checked` 状态。源码涉及 `callParent()`、`setChecked()`、`disableCheckChange()`。 | `component.afterRender()` |
| `disableCheckChange` | `` | 禁用 `checkChange`。 执行时会更新 `checkChangeDisabled` 状态。 | `component.disableCheckChange()` |
| `enableCheckChange` | `` | 启用 `checkChange`。 执行时会更新 `checkChangeDisabled` 状态。 | `component.enableCheckChange()` |
| `onClick` | `e` | 处理 `click` 回调。 执行时会保留父类默认行为。源码涉及 `setChecked()`、`callParent()`。 | `component.onClick(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `setChecked` | `checked, suppressEvents` | 设置 `checked`。 执行时会派发 `beforecheckchange`、`checkchange` 事件、更新 `checked` 状态。源码涉及 `fireEvent()`。 | `component.setChecked(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforecheckchange` | 复选状态变化前触发；监听器返回 `false` 可取消变更。 源码在 `setChecked()` 中通过 `fireEvent()` 触发。 | `listeners: { beforecheckchange: function () {} }` |
| `checkchange` | 复选状态变化后触发。 源码在 `setChecked()` 中通过 `fireEvent()` 触发。 | `listeners: { checkchange: function () {} }` |

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