---
title: "Ext.form.field.Checkbox"
description: "xtype 为 checkboxfield 的 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.field.Checkbox

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.Checkbox", {
  xtype: "checkboxfield",
  afterLabelCls: Ext.baseCSSPrefix + 'form-cb-after',
  ariaRole: 'checkbox',
  boxLabelAlign: 'after',
  boxLabelCls: Ext.baseCSSPrefix + 'form-cb-label',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `afterLabelCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-cb-after'` | 配置 `afterLabelCls` 对应的 CSS 类名。 | `afterLabelCls: Ext.baseCSSPrefix + 'form-cb-after'` |
| `ariaRole` | `String` | `'checkbox'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'checkbox'` |
| `boxLabelAlign` | `String` | `'after'` | 配置组件的 `boxLabelAlign` 选项。 | `boxLabelAlign: 'after'` |
| `boxLabelCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-cb-label'` | 配置 `boxLabelCls` 对应的 CSS 类名。 | `boxLabelCls: Ext.baseCSSPrefix + 'form-cb-label'` |
| `checkChangeEvents` | `Array` | `[]` | 配置组件的 `checkChangeEvents` 选项。 | `checkChangeEvents: []` |
| `checked` | `Boolean` | `false` | 控制是否启用 `checked` 行为。 | `checked: false` |
| `checkedCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-cb-checked'` | 配置 `checkedCls` 对应的 CSS 类名。 | `checkedCls: Ext.baseCSSPrefix + 'form-cb-checked'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `componentLayout` | `String` | `'field'` | 组件采用的内部布局策略。 | `componentLayout: 'field'` |
| `extraFieldBodyCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-cb-wrap'` | 配置 `extraFieldBodyCls` 对应的 CSS 类名。 | `extraFieldBodyCls: Ext.baseCSSPrefix + 'form-cb-wrap'` |
| `fieldSubTpl` | `Array` | `[` | 字段 HTML 的子模板片段。 | `fieldSubTpl: [` |
| `focusCls` | `String` | `'form-checkbox-focus'` | 配置 `focusCls` 对应的 CSS 类名。 | `focusCls: 'form-checkbox-focus'` |
| `inputCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-cb'` | 配置 `inputCls` 对应的 CSS 类名。 | `inputCls: Ext.baseCSSPrefix + 'form-cb'` |
| `inputType` | `String` | `'checkbox'` | 配置组件的 `inputType` 选项。 | `inputType: 'checkbox'` |
| `inputValue` | `String` | `'on'` | 配置组件的 `inputValue` 选项。 | `inputValue: 'on'` |
| `isCheckbox` | `Boolean` | `true` | 控制是否启用 `isCheckbox` 行为。 | `isCheckbox: true` |
| `noBoxLabelCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-cb-wrap-inner-no-bo...` | 配置 `noBoxLabelCls` 对应的 CSS 类名。 | `noBoxLabelCls: Ext.baseCSSPrefix + 'form-cb-wrap-inner-no-bo...` |
| `onRe` | `Mixed` | `/^on$/i` | 配置 `onRe` 回调函数。 | `onRe: /^on$/i` |
| `stretchInputElFixed` | `Boolean` | `false` | 控制是否启用 `stretchInputElFixed` 行为。 | `stretchInputElFixed: false` |
| `subTplInsertions` | `Array` | `[` | 配置组件的 `subTplInsertions` 选项。 | `subTplInsertions: [` |
| `valueToRaw` | `Mixed` | `Ext.identityFn` | 配置组件的 `valueToRaw` 选项。 | `valueToRaw: Ext.identityFn` |
| `wrapInnerCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-cb-wrap-inner'` | 配置 `wrapInnerCls` 对应的 CSS 类名。 | `wrapInnerCls: Ext.baseCSSPrefix + 'form-cb-wrap-inner'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `checked` 状态。源码涉及 `isChecked()`、`callParent()`、`getManager()`。 | `component.initComponent()` |
| `initValue` | `` | 初始化 `value`。 执行时会更新组件值、更新 `originalValue`、`lastValue` 状态。源码涉及 `setValue()`。 | `component.initValue()` |
| `getElConfig` | `` | 读取并返回 `elConfig`。 执行时会保留父类默认行为。源码涉及 `isChecked()`、`addCls()`、`callParent()`。 | `component.getElConfig()` |
| `getSubTplData` | `` | 读取并返回 `subTplData`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getSubTplData()` |
| `initEvents` | `` | 初始化 `events`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`mon()`。 | `component.initEvents()` |
| `setBoxLabel` | `boxLabel` | 设置 `boxLabel`。 执行时会更新 `boxLabel` 状态。 | `component.setBoxLabel(...)` |
| `onBoxClick` | `e` | 处理 `boxClick` 回调。 执行时会更新组件值。源码涉及 `setValue()`。 | `component.onBoxClick(...)` |
| `getRawValue` | `` | 读取并返回 `rawValue`。 | `component.getRawValue()` |
| `getValue` | `` | 读取并返回 `value`。 | `component.getValue()` |
| `getSubmitValue` | `` | 读取并返回 `submitValue`。 | `component.getSubmitValue()` |
| `isChecked` | `rawValue, inputValue` | 判断 `checked` 状态。 | `component.isChecked(...)` |
| `setRawValue` | `value` | 设置 `rawValue`。 执行时会更新 `checked`、`rawValue` 状态。源码涉及 `isChecked()`。 | `component.setRawValue(...)` |
| `setValue` | `checked` | 设置 `value`。 执行时会保留父类默认行为、更新 `duringSetValue` 状态。源码涉及 `getManager()`、`getFormId()`、`callParent()`。 | `component.setValue(...)` |
| `onChange` | `newVal, oldVal` | 处理 `change` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onChange(...)` |
| `resetOriginalValue` | `fromBoxInGroup` | 重置 `originalValue`。 执行时会保留父类默认行为。源码涉及 `getManager()`、`getFormId()`、`callParent()`。 | `component.resetOriginalValue(...)` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`、`getManager()`。 | `component.beforeDestroy()` |
| `getManager` | `` | 读取并返回 `manager`。 | `component.getManager()` |
| `onEnable` | `` | 处理 `enable` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onEnable()` |
| `setReadOnly` | `readOnly` | 设置 `readOnly`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.setReadOnly(...)` |
| `getFormId` | `` | 读取并返回 `formId`。 执行时会更新 `formId` 状态。源码涉及 `up()`。 | `component.getFormId()` |

## 事件

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

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