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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.FieldSet", {
  xtype: "fieldset",
  afterCollapse: Ext.emptyFn,
  afterExpand: Ext.emptyFn,
  ariaRole: null,
  autoEl: 'fieldset',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `afterCollapse` | `Mixed` | `Ext.emptyFn` | 配置组件的 `afterCollapse` 选项。 | `afterCollapse: Ext.emptyFn` |
| `afterExpand` | `Mixed` | `Ext.emptyFn` | 配置组件的 `afterExpand` 选项。 | `afterExpand: Ext.emptyFn` |
| `ariaRole` | `Object/null` | `null` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: null` |
| `autoEl` | `String` | `'fieldset'` | 配置组件的 `autoEl` 选项。 | `autoEl: 'fieldset'` |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'fieldset'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'fieldset'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `collapsed` | `Boolean` | `false` | 控制面板初始是否处于收起状态。 | `collapsed: false` |
| `componentLayout` | `String` | `'fieldset'` | 组件采用的内部布局策略。 | `componentLayout: 'fieldset'` |
| `layout` | `String` | `'anchor'` | 容器对子组件进行排布的布局配置。 | `layout: 'anchor'` |
| `maskOnDisable` | `Boolean` | `false` | 控制是否启用 `maskOnDisable` 行为。 | `maskOnDisable: false` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `toggleOnTitleClick` | `Boolean` | `true` | 控制是否启用 `toggleOnTitleClick` 行为。 | `toggleOnTitleClick: true` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为、更新 `legend` 状态。源码涉及 `callParent()`。 | `component.beforeDestroy()` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `legend` 状态。源码涉及 `initFieldAncestor()`、`callParent()`、`addEvents()`、`addCls()`。 | `component.initComponent()` |
| `initPadding` | `targetEl` | 初始化 `padding`。源码涉及 `getProtoBody()`、`parseBox()`、`unitizeBox()`。 | `component.initPadding(...)` |
| `getProtoBody` | `` | 读取并返回 `protoBody`。 执行时会更新 `protoBody` 状态。 | `component.getProtoBody()` |
| `initRenderData` | `` | 初始化 `renderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.initRenderData()` |
| `getState` | `` | 调用并直接返回父类的值，不对结果作额外转换。 | `component.getState()` |
| `collapsedHorizontal` | `` | 收起 `dHorizontal`。 | `component.collapsedHorizontal()` |
| `collapsedVertical` | `` | 收起 `dVertical`。 | `component.collapsedVertical()` |
| `createLegendCt` | `` | 创建 `legendCt`。源码涉及 `createCheckboxCmp()`、`createToggleCmp()`、`createTitleCmp()`。 | `component.createLegendCt()` |
| `createTitleCmp` | `` | 创建 `titleCmp`。 执行时会更新 `titleCmp` 状态。 | `component.createTitleCmp()` |
| `createCheckboxCmp` | `` | 创建 `checkboxCmp`。 执行时会更新 `checkboxCmp` 状态。 | `component.createCheckboxCmp()` |
| `createToggleCmp` | `` | 创建 `toggleCmp`。 执行时会更新 `toggleCmp` 状态。 | `component.createToggleCmp()` |
| `doRenderLegend` | `out, renderData` | 执行 `renderLegend` 操作。 | `component.doRenderLegend(...)` |
| `finishRender` | `` | 生成 `finish` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.finishRender()` |
| `getCollapsed` | `` | 读取并返回 `collapsed`。 | `component.getCollapsed()` |
| `getCollapsedDockedItems` | `` | 读取并返回 `collapsedDockedItems`。 | `component.getCollapsedDockedItems()` |
| `setTitle` | `title` | 设置 `title`。 执行时会更新 `title`、`legend` 状态。源码涉及 `createLegendCt()`、`addTitleClasses()`。 | `component.setTitle(...)` |
| `addTitleClasses` | `` | 添加 `titleClasses`。源码涉及 `addCls()`。 | `component.addTitleClasses()` |
| `applyTargetCls` | `targetCls` | 应用 `targetCls`。 执行时会更新 `bodyTargetCls` 状态。 | `component.applyTargetCls(...)` |
| `getTargetEl` | `` | 读取并返回 `targetEl`。 | `component.getTargetEl()` |
| `getDefaultContentTarget` | `` | 读取并返回 `defaultContentTarget`。 | `component.getDefaultContentTarget()` |
| `expand` | `` | 展开组件。源码涉及 `setExpanded()`。 | `component.expand()` |
| `collapse` | `` | 收起组件。源码涉及 `setExpanded()`。 | `component.collapse()` |
| `setExpanded` | `expanded` | 设置 `expanded`。 执行时会派发 `before` 事件、刷新界面或布局、更新 `collapsed` 状态。源码涉及 `fireEvent()`、`removeCls()`、`addCls()`、`getHierarchyState()`。 | `component.setExpanded(...)` |
| `getRefItems` | `deep` | 读取并返回 `refItems`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getRefItems(...)` |
| `toggle` | `` | 切换当前组件。源码涉及 `setExpanded()`。 | `component.toggle()` |
| `onCheckChange` | `cmp, checked` | 处理 `checkChange` 回调。源码涉及 `setExpanded()`。 | `component.onCheckChange(...)` |
| `setupRenderTpl` | `renderTpl` | 设置 `upRenderTpl`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.setupRenderTpl(...)` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforecollapse` | 组件收起前触发；监听器返回 `false` 可取消收起。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforecollapse: function () {} }` |
| `beforeexpand` | 组件展开前触发；监听器返回 `false` 可取消展开。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { beforeexpand: function () {} }` |
| `collapse` | 可折叠组件收起后触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { collapse: function () {} }` |
| `expand` | 可展开组件展开后触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { expand: function () {} }` |

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