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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.Base", {
  xtype: "field",
  baseCls: Ext.baseCSSPrefix + 'field',
  checkChangeBuffer: 50,
  checkChangeEvents: Ext.isIE && (!document.documentMode || docume...,
  componentLayout: 'field',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'field'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'field'` |
| `checkChangeBuffer` | `Number` | `50` | 配置组件的 `checkChangeBuffer` 选项。 | `checkChangeBuffer: 50` |
| `checkChangeEvents` | `Mixed` | `Ext.isIE && (!document.documentMode \|\| docume...` | 配置组件的 `checkChangeEvents` 选项。 | `checkChangeEvents: Ext.isIE && (!document.documentMode \|\| docume...` |
| `componentLayout` | `String` | `'field'` | 组件采用的内部布局策略。 | `componentLayout: 'field'` |
| `dirtyCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-dirty'` | 配置 `dirtyCls` 对应的 CSS 类名。 | `dirtyCls: Ext.baseCSSPrefix + 'form-dirty'` |
| `fieldCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-field'` | 配置 `fieldCls` 对应的 CSS 类名。 | `fieldCls: Ext.baseCSSPrefix + 'form-field'` |
| `fieldSubTpl` | `Array` | `[` | 字段 HTML 的子模板片段。 | `fieldSubTpl: [` |
| `focusCls` | `String` | `'form-focus'` | 配置 `focusCls` 对应的 CSS 类名。 | `focusCls: 'form-focus'` |
| `hasFocus` | `Boolean` | `false` | 控制是否启用 `hasFocus` 行为。 | `hasFocus: false` |
| `ignoreChangeRe` | `Mixed` | `/data\-errorqtip\|style\.\|className/` | 配置组件的 `ignoreChangeRe` 选项。 | `ignoreChangeRe: /data\-errorqtip\|style\.\|className/` |
| `inputType` | `String` | `'text'` | 配置组件的 `inputType` 选项。 | `inputType: 'text'` |
| `invalidText` | `String` | `'The value in this field is invalid'` | 配置组件的 `invalidText` 选项。 | `invalidText: 'The value in this field is invalid'` |
| `isLowerCase` | `Boolean` | `false` | 控制是否启用 `isLowerCase` 行为。 | `isLowerCase: false` |
| `isUpperCase` | `Boolean` | `false` | 控制是否启用 `isUpperCase` 行为。 | `isUpperCase: false` |
| `maskOnDisable` | `Boolean` | `false` | 控制是否启用 `maskOnDisable` 行为。 | `maskOnDisable: false` |
| `processRawValue` | `Mixed` | `Ext.identityFn` | 配置组件的 `processRawValue` 选项。 | `processRawValue: Ext.identityFn` |
| `rawToValue` | `Mixed` | `Ext.identityFn` | 配置组件的 `rawToValue` 选项。 | `rawToValue: Ext.identityFn` |
| `readOnly` | `Boolean` | `false` | 控制字段是否只读。 | `readOnly: false` |
| `readOnlyCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-readonly'` | 配置 `readOnlyCls` 对应的 CSS 类名。 | `readOnlyCls: Ext.baseCSSPrefix + 'form-readonly'` |
| `stretchInputElFixed` | `Boolean` | `true` | 控制是否启用 `stretchInputElFixed` 行为。 | `stretchInputElFixed: true` |
| `subTplInsertions` | `Array` | `[` | 配置组件的 `subTplInsertions` 选项。 | `subTplInsertions: [` |
| `transformRawValue` | `Mixed` | `Ext.identityFn` | 配置组件的 `transformRawValue` 选项。 | `transformRawValue: Ext.identityFn` |
| `validateOnBlur` | `Boolean` | `true` | 控制是否启用 `validateOnBlur` 行为。 | `validateOnBlur: true` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `height`、`subTplData` 状态。源码涉及 `callParent()`、`addEvents()`、`initLabelable()`、`initField()`。 | `component.initComponent()` |
| `getInputId` | `` | 读取并返回 `inputId`。 执行时会更新 `inputId` 状态。 | `component.getInputId()` |
| `getSubTplData` | `` | 读取并返回 `subTplData`。 执行时会更新 `fieldStyle` 状态。源码涉及 `getInputId()`、`getRawValue()`、`getFieldStyle()`、`getInsertionRenderData()`。 | `component.getSubTplData()` |
| `applyRenderSelectors` | `` | 应用 `renderSelectors`。 执行时会保留父类默认行为、更新 `inputEl` 状态。源码涉及 `callParent()`、`addChildEls()`、`getInputId()`。 | `component.applyRenderSelectors()` |
| `getSubTplMarkup` | `` | 读取并返回 `subTplMarkup`。源码涉及 `getTpl()`、`getSubTplData()`。 | `component.getSubTplMarkup()` |
| `initRenderTpl` | `` | 初始化 `renderTpl`。 执行时会保留父类默认行为、更新 `renderTpl` 状态。源码涉及 `hasOwnProperty()`、`getTpl()`、`callParent()`。 | `component.initRenderTpl()` |
| `initRenderData` | `` | 初始化 `renderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`getLabelableRenderData()`。 | `component.initRenderData()` |
| `setFieldStyle` | `style` | 设置 `fieldStyle`。 执行时会更新 `fieldStyle` 状态。 | `component.setFieldStyle(...)` |
| `getFieldStyle` | `` | 读取并返回 `fieldStyle`。 | `component.getFieldStyle()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`、`renderActiveError()`。 | `component.onRender()` |
| `getFocusEl` | `` | 读取并返回 `focusEl`。 | `component.getFocusEl()` |
| `isFileUpload` | `` | 判断 `fileUpload` 状态。 | `component.isFileUpload()` |
| `getSubmitData` | `` | 读取并返回 `submitData`。源码涉及 `getSubmitValue()`、`getName()`。 | `component.getSubmitData()` |
| `getSubmitValue` | `` | 读取并返回 `submitValue`。源码涉及 `processRawValue()`、`getRawValue()`。 | `component.getSubmitValue()` |
| `getRawValue` | `` | 读取并返回 `rawValue`。 执行时会更新 `rawValue` 状态。 | `component.getRawValue()` |
| `setRawValue` | `value` | 设置 `rawValue`。 执行时会更新 `rawValue` 状态。源码涉及 `transformRawValue()`、`bindPropertyChange()`。 | `component.setRawValue(...)` |
| `valueToRaw` | `value` | 将 `value` 转换为 `raw`。 | `component.valueToRaw(...)` |
| `getValue` | `` | 读取并返回 `value`。 执行时会更新 `value` 状态。源码涉及 `rawToValue()`、`processRawValue()`、`getRawValue()`。 | `component.getValue()` |
| `setValue` | `value` | 设置 `value`。源码涉及 `setRawValue()`、`valueToRaw()`。 | `component.setValue(...)` |
| `onBoxReady` | `` | 处理 `boxReady` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`setReadOnly()`。 | `component.onBoxReady()` |
| `onDisable` | `` | 处理 `disable` 回调。 执行时会保留父类默认行为、更新 `needsValidateOnEnable` 状态。源码涉及 `callParent()`、`hasActiveError()`、`clearInvalid()`。 | `component.onDisable()` |
| `onEnable` | `` | 处理 `enable` 回调。 执行时会保留父类默认行为、更新 `forceValidation` 状态。源码涉及 `callParent()`、`isValid()`。 | `component.onEnable()` |
| `setAllowBlank` | `allowBlank` | 设置 `allowBlank`。 执行时会更新 `allowBlank` 状态。源码涉及 `getFieldLabel()`、`setFieldLabel()`。 | `component.setAllowBlank(...)` |
| `setReadOnly` | `readOnly` | 设置 `readOnly`。 执行时会派发 `writeablechange` 事件、更新 `readOnly`、`setReadOnlyOnBoxReady` 状态。源码涉及 `fireEvent()`。 | `component.setReadOnly(...)` |
| `fireKey` | `e` | 触发 `key`。 执行时会派发 `specialkey` 事件。源码涉及 `fireEvent()`。 | `component.fireKey(...)` |
| `initEvents` | `` | 初始化 `events`。 执行时会保留父类默认行为、更新 `onChangeEvent`、`usesPropertychange` 状态。源码涉及 `mon()`、`callParent()`。 | `component.initEvents()` |
| `doComponentLayout` | `` | 执行 `componentLayout` 操作。 执行时会保留父类默认行为。源码涉及 `bindPropertyChange()`、`callParent()`。 | `component.doComponentLayout()` |
| `bindPropertyChange` | `active` | 绑定 `propertyChange`。 | `component.bindPropertyChange(...)` |
| `onDirtyChange` | `isDirty` | 处理 `dirtyChange` 回调。 | `component.onDirtyChange(...)` |
| `isValid` | `` | 判断 `valid` 状态。源码涉及 `validateValue()`、`processRawValue()`、`getRawValue()`。 | `component.isValid()` |
| `validateValue` | `value` | 校验 `value`。源码涉及 `getErrors()`、`clearInvalid()`、`markInvalid()`。 | `component.validateValue(...)` |
| `markInvalid` | `errors` | 处理 `markInvalid` 操作。源码涉及 `getActiveError()`、`setActiveErrors()`、`setError()`。 | `component.markInvalid(...)` |
| `clearInvalid` | `` | 清空 `invalid`。源码涉及 `hasActiveError()`、`unsetActiveError()`、`setError()`。 | `component.clearInvalid()` |
| `setError` | `active` | 设置 `error`。 执行时会刷新界面或布局。源码涉及 `getActionEl()`、`updateLayout()`。 | `component.setError(...)` |
| `renderActiveError` | `` | 渲染 `activeError`。源码涉及 `hasActiveError()`。 | `component.renderActiveError()` |
| `getActionEl` | `` | 读取并返回 `actionEl`。 | `component.getActionEl()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `specialkey` | 组件获得特殊按键输入时触发。 源码在 `fireKey()` 中通过 `fireEvent()` 触发。 | `listeners: { specialkey: function () {} }` |
| `writeablechange` | 字段可编辑状态变化后触发。 源码在 `setReadOnly()` 中通过 `fireEvent()` 触发。 | `listeners: { writeablechange: function () {} }` |

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