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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.FieldContainer", {
  xtype: "fieldcontainer",
  allowBlank: true,
  childEls: [,
  combineErrors: false,
  combineLabels: false,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `allowBlank` | `Boolean` | `true` | 控制字段是否允许为空。 | `allowBlank: true` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `combineErrors` | `Boolean` | `false` | 控制是否启用 `combineErrors` 行为。 | `combineErrors: false` |
| `combineLabels` | `Boolean` | `false` | 控制是否启用 `combineLabels` 行为。 | `combineLabels: false` |
| `componentCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-fieldcontainer'` | 配置 `componentCls` 对应的 CSS 类名。 | `componentCls: Ext.baseCSSPrefix + 'form-fieldcontainer'` |
| `componentLayout` | `String` | `'fieldcontainer'` | 组件采用的内部布局策略。 | `componentLayout: 'fieldcontainer'` |
| `customOverflowEl` | `String` | `'containerEl'` | 配置组件的 `customOverflowEl` 选项。 | `customOverflowEl: 'containerEl'` |
| `fieldSubTpl` | `Array` | `[` | 字段 HTML 的子模板片段。 | `fieldSubTpl: [` |
| `invalidCls` | `String` | `''` | 配置 `invalidCls` 对应的 CSS 类名。 | `invalidCls: ''` |
| `maskOnDisable` | `Boolean` | `false` | 控制是否启用 `maskOnDisable` 行为。 | `maskOnDisable: false` |
| `starPrefix` | `Boolean` | `true` | 控制是否启用 `starPrefix` 行为。 | `starPrefix: true` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `height` 状态。源码涉及 `initLabelable()`、`initFieldAncestor()`、`callParent()`、`initMonitor()`。 | `component.initComponent()` |
| `getOverflowEl` | `` | 读取并返回 `overflowEl`。 | `component.getOverflowEl()` |
| `onAdd` | `item` | 处理 `add` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`updateLabel()`。 | `component.onAdd(...)` |
| `onRemove` | `item, isDestroying` | 处理 `remove` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`updateLabel()`。 | `component.onRemove(...)` |
| `initRenderTpl` | `` | 初始化 `renderTpl`。 执行时会保留父类默认行为、更新 `renderTpl` 状态。源码涉及 `hasOwnProperty()`、`getTpl()`、`callParent()`。 | `component.initRenderTpl()` |
| `initRenderData` | `` | 初始化 `renderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`getLabelableRenderData()`。 | `component.initRenderData()` |
| `getFieldLabel` | `` | 读取并返回 `fieldLabel`。源码涉及 `query()`。 | `component.getFieldLabel()` |
| `getSubTplData` | `` | 读取并返回 `subTplData`。源码涉及 `initRenderData()`。 | `component.getSubTplData()` |
| `getSubTplMarkup` | `` | 读取并返回 `subTplMarkup`。源码涉及 `getTpl()`、`setupRenderTpl()`、`getSubTplData()`。 | `component.getSubTplMarkup()` |
| `updateLabel` | `` | 更新 `label`。源码涉及 `setFieldLabel()`、`getFieldLabel()`。 | `component.updateLabel()` |
| `onFieldErrorChange` | `field, activeError` | 处理 `fieldErrorChange` 回调。源码涉及 `getActiveError()`、`query()`、`getCombinedErrors()`、`setActiveErrors()`。 | `component.onFieldErrorChange(...)` |
| `getCombinedErrors` | `invalidFields` | 读取并返回 `combinedErrors`。 | `component.getCombinedErrors(...)` |
| `getTargetEl` | `` | 读取并返回 `targetEl`。 | `component.getTargetEl()` |
| `applyTargetCls` | `targetCls` | 应用 `targetCls`。 执行时会更新 `containerElCls` 状态。 | `component.applyTargetCls(...)` |

## 事件

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

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