---
title: "Ext.form.CheckboxGroup"
description: "xtype 为 checkboxgroup 的 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.form.CheckboxGroup

源码定义：`ext-all-debug.js:97997`。分类：表单与字段。

## 创建示例

```javascript
var component = Ext.create("Ext.form.CheckboxGroup", {
  xtype: "checkboxgroup",
  allowBlank: true,
  ariaRole: 'group',
  blankText: "You must select at least one item in this gr...,
  columns: 'auto',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `allowBlank` | `Boolean` | `true` | 控制字段是否允许为空。 | `allowBlank: true` |
| `ariaRole` | `String` | `'group'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'group'` |
| `blankText` | `String` | `"You must select at least one item in this gr...` | 配置组件的 `blankText` 选项。 | `blankText: "You must select at least one item in this gr...` |
| `columns` | `String` | `'auto'` | 表格或布局中包含的列定义。 | `columns: 'auto'` |
| `componentCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-checkboxgroup'` | 配置 `componentCls` 对应的 CSS 类名。 | `componentCls: Ext.baseCSSPrefix + 'form-checkboxgroup'` |
| `defaultType` | `String` | `'checkboxfield'` | 配置组件的 `defaultType` 选项。 | `defaultType: 'checkboxfield'` |
| `extraFieldBodyCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-checkboxgroup-body'` | 配置 `extraFieldBodyCls` 对应的 CSS 类名。 | `extraFieldBodyCls: Ext.baseCSSPrefix + 'form-checkboxgroup-body'` |
| `groupCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-check-group'` | 配置 `groupCls` 对应的 CSS 类名。 | `groupCls: Ext.baseCSSPrefix + 'form-check-group'` |
| `invalidCls` | `String` | `'x-checkgroup-invalid'` | 配置 `invalidCls` 对应的 CSS 类名。 | `invalidCls: 'x-checkgroup-invalid'` |
| `layout` | `String` | `'checkboxgroup'` | 容器对子组件进行排布的布局配置。 | `layout: 'checkboxgroup'` |
| `vertical` | `Boolean` | `false` | 控制组件是否以垂直方向显示。 | `vertical: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为。源码涉及 `callParent()`、`initField()`。 | `component.initComponent()` |
| `initValue` | `` | 初始化 `value`。 执行时会更新组件值、更新 `originalValue`、`lastValue` 状态。源码涉及 `getValue()`、`setValue()`。 | `component.initValue()` |
| `onAdd` | `item` | 处理 `add` 回调。 执行时会保留父类默认行为。源码涉及 `mon()`、`callParent()`。 | `component.onAdd(...)` |
| `onRemove` | `item` | 处理 `remove` 回调。 执行时会保留父类默认行为。源码涉及 `mun()`、`callParent()`。 | `component.onRemove(...)` |
| `isEqual` | `value1, value2` | 判断 `equal` 状态。 | `component.isEqual(...)` |
| `getErrors` | `` | 读取并返回 `errors`。源码涉及 `getChecked()`。 | `component.getErrors()` |
| `getBoxes` | `query` | 读取并返回 `boxes`。源码涉及 `query()`。 | `component.getBoxes(...)` |
| `eachBox` | `fn, scope` | 处理 `eachBox` 操作。源码涉及 `getBoxes()`。 | `component.eachBox(...)` |
| `getChecked` | `` | 读取并返回 `checked`。源码涉及 `getBoxes()`。 | `component.getChecked()` |
| `isDirty` | `` | 判断 `dirty` 状态。源码涉及 `getBoxes()`。 | `component.isDirty()` |
| `setReadOnly` | `readOnly` | 设置 `readOnly`。 执行时会更新 `readOnly` 状态。源码涉及 `getBoxes()`。 | `component.setReadOnly(...)` |
| `reset` | `` | 将组件恢复为初始状态。 执行时会刷新界面或布局、更新 `preventMark` 状态。源码涉及 `hasActiveError()`、`batchChanges()`、`getBoxes()`、`unsetActiveError()`。 | `component.reset()` |
| `resetOriginalValue` | `` | 重置 `originalValue`。 执行时会更新 `originalValue` 状态。源码涉及 `getBoxes()`、`getValue()`、`checkDirty()`。 | `component.resetOriginalValue()` |
| `setValue` | `value` | 设置 `value`。源码涉及 `getBoxes()`、`batchChanges()`。 | `component.setValue(...)` |
| `getValue` | `` | 读取并返回 `value`。源码涉及 `getBoxes()`。 | `component.getValue()` |
| `getSubmitData` | `` | 读取并返回 `submitData`。 | `component.getSubmitData()` |
| `getModelData` | `` | 读取并返回 `modelData`。 | `component.getModelData()` |
| `validate` | `` | 校验当前组件。 执行时会派发 `validitychange` 事件、刷新界面或布局、更新 `wasValid` 状态。源码涉及 `getErrors()`、`unsetActiveError()`、`setActiveError()`、`fireEvent()`。 | `component.validate()` |

## 事件

源码中未找到该组件自身注册的事件；可监听继承事件。

Source: https://ag.879818327.xyz/ext/form/form-checkboxgroup/index.mdx