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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.Text", {
  xtype: "textfield",
  allowBlank: true,
  allowOnlyWhitespace: true,
  ariaRole: 'textbox',
  blankText: 'This field is required',
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `allowBlank` | `Boolean` | `true` | 控制字段是否允许为空。 | `allowBlank: true` |
| `allowOnlyWhitespace` | `Boolean` | `true` | 控制是否启用 `allowOnlyWhitespace` 行为。 | `allowOnlyWhitespace: true` |
| `ariaRole` | `String` | `'textbox'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'textbox'` |
| `blankText` | `String` | `'This field is required'` | 配置组件的 `blankText` 选项。 | `blankText: 'This field is required'` |
| `componentLayout` | `String` | `'textfield'` | 组件采用的内部布局策略。 | `componentLayout: 'textfield'` |
| `emptyCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-empty-field'` | 配置 `emptyCls` 对应的 CSS 类名。 | `emptyCls: Ext.baseCSSPrefix + 'form-empty-field'` |
| `growAppend` | `String` | `'W'` | 配置组件的 `growAppend` 选项。 | `growAppend: 'W'` |
| `growMax` | `Number` | `800` | 配置组件的 `growMax` 选项。 | `growMax: 800` |
| `growMin` | `Number` | `30` | 配置组件的 `growMin` 选项。 | `growMin: 30` |
| `labelAlign` | `String` | `"right"` | 字段标签相对输入区域的对齐位置。 | `labelAlign: "right"` |
| `labelWidth` | `Number` | `80` | 字段标签区域的宽度。 | `labelWidth: 80` |
| `maxLength` | `Mixed` | `Number.MAX_VALUE` | 配置 `maxLength` 限制值。 | `maxLength: Number.MAX_VALUE` |
| `maxLengthText` | `String` | `'The maximum length for this field is {0}'` | 配置 `maxLengthText` 限制值。 | `maxLengthText: 'The maximum length for this field is {0}'` |
| `minLength` | `Number` | `0` | 配置 `minLength` 限制值。 | `minLength: 0` |
| `minLengthText` | `String` | `'The minimum length for this field is {0}'` | 配置 `minLengthText` 限制值。 | `minLengthText: 'The minimum length for this field is {0}'` |
| `regexText` | `String` | `''` | 配置组件的 `regexText` 选项。 | `regexText: ''` |
| `requiredCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-required-field'` | 配置 `requiredCls` 对应的 CSS 类名。 | `requiredCls: Ext.baseCSSPrefix + 'form-required-field'` |
| `size` | `Number` | `20` | 配置组件的 `size` 选项。 | `size: 20` |
| `validateBlank` | `Boolean` | `false` | 控制是否启用 `validateBlank` 行为。 | `validateBlank: false` |
| `valueContainsPlaceholder` | `Boolean` | `false` | 控制是否启用 `valueContainsPlaceholder` 行为。 | `valueContainsPlaceholder: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `allowBlank`、`fieldCls` 状态。源码涉及 `callParent()`、`addEvents()`、`addStateEvents()`、`setGrowSizePolicy()`。 | `component.initComponent()` |
| `setGrowSizePolicy` | `` | 设置 `growSizePolicy`。 | `component.setGrowSizePolicy()` |
| `initEvents` | `` | 初始化 `events`。 执行时会保留父类默认行为、更新 `maskRe` 状态。源码涉及 `callParent()`、`mon()`。 | `component.initEvents()` |
| `isEqual` | `value1, value2` | 判断 `equal` 状态。源码涉及 `isEqualAsString()`。 | `component.isEqual(...)` |
| `onChange` | `newVal, oldVal` | 处理 `change` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`autoSize()`。 | `component.onChange(...)` |
| `getSubTplData` | `` | 读取并返回 `subTplData`。 执行时会保留父类默认行为、更新 `valueContainsPlaceholder` 状态。源码涉及 `getRawValue()`、`callParent()`。 | `component.getSubTplData()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `autoSize()`、`callParent()`。 | `component.afterRender()` |
| `onMouseDown` | `e` | 处理 `mouseDown` 回调。源码涉及 `mon()`。 | `component.onMouseDown(...)` |
| `processRawValue` | `value` | 处理 `rawValue`。 执行时会更新组件值。源码涉及 `setRawValue()`。 | `component.processRawValue(...)` |
| `onDisable` | `` | 处理 `disable` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDisable()` |
| `onEnable` | `` | 处理 `enable` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onEnable()` |
| `onKeyDown` | `e` | 处理 `keyDown` 回调。 执行时会派发 `keydown` 事件。源码涉及 `fireEvent()`。 | `component.onKeyDown(...)` |
| `onKeyUp` | `e` | 处理 `keyUp` 回调。 执行时会派发 `keyup` 事件。源码涉及 `fireEvent()`。 | `component.onKeyUp(...)` |
| `onKeyPress` | `e` | 处理 `keyPress` 回调。 执行时会派发 `keypress` 事件。源码涉及 `fireEvent()`。 | `component.onKeyPress(...)` |
| `reset` | `` | 将组件恢复为初始状态。 执行时会保留父类默认行为。源码涉及 `callParent()`、`applyEmptyText()`。 | `component.reset()` |
| `applyEmptyText` | `` | 应用 `emptyText`。 执行时会更新组件值、更新 `valueContainsPlaceholder` 状态。源码涉及 `getRawValue()`、`setRawValue()`、`autoSize()`。 | `component.applyEmptyText()` |
| `afterFirstLayout` | `` | 在 `firstLayout` 后执行后处理。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.afterFirstLayout()` |
| `beforeFocus` | `` | 在 `focus` 前执行预处理。 执行时会保留父类默认行为、更新组件值、更新 `valueContainsPlaceholder`、`inputFocusTask` 状态。源码涉及 `callParent()`、`setRawValue()`、`focusInput()`。 | `component.beforeFocus()` |
| `focusInput` | `` | 将焦点移动到 `input`。 | `component.focusInput()` |
| `onFocus` | `` | 处理 `focus` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`、`autoSize()`。 | `component.onFocus()` |
| `postBlur` | `` | 执行后续处理 `blur`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`applyEmptyText()`。 | `component.postBlur()` |
| `filterKeys` | `e` | 处理 `filterKeys` 操作。 | `component.filterKeys(...)` |
| `getState` | `` | 读取并返回 `state`。 执行时会保留父类默认行为。源码涉及 `addPropertyToState()`、`callParent()`。 | `component.getState()` |
| `applyState` | `state` | 应用 `state`。 执行时会保留父类默认行为、更新组件值。源码涉及 `callParent()`、`setValue()`。 | `component.applyState(...)` |
| `getRawValue` | `` | 读取并返回 `rawValue`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getRawValue()` |
| `setValue` | `value` | 设置 `value`。 执行时会保留父类默认行为、更新 `valueContainsPlaceholder` 状态。源码涉及 `callParent()`、`applyEmptyText()`。 | `component.setValue(...)` |
| `getErrors` | `value` | 读取并返回 `errors`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`processRawValue()`、`getRawValue()`。 | `component.getErrors(...)` |
| `selectText` | `start, end` | 选中 `text`。源码涉及 `getRawValue()`、`focus()`。 | `component.selectText(...)` |
| `autoSize` | `` | 自动计算尺寸当前组件。 执行时会刷新界面或布局、更新 `autoSizing` 状态。源码涉及 `updateLayout()`。 | `component.autoSize()` |
| `afterComponentLayout` | `` | 在 `componentLayout` 后执行后处理。 执行时会保留父类默认行为、派发 `autosize` 事件、更新 `lastInputWidth` 状态。源码涉及 `callParent()`、`fireEvent()`。 | `component.afterComponentLayout()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为、更新 `inputFocusTask` 状态。源码涉及 `callParent()`。 | `component.onDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `autosize` | 组件根据内容自动调整尺寸后触发。 源码在 `afterComponentLayout()` 中通过 `fireEvent()` 触发。 | `listeners: { autosize: function () {} }` |
| `keydown` | 用户按下按键时触发。 源码在 `onKeyDown()` 中通过 `fireEvent()` 触发。 | `listeners: { keydown: function () {} }` |
| `keypress` | 用户输入字符按键时触发。 源码在 `onKeyPress()` 中通过 `fireEvent()` 触发。 | `listeners: { keypress: function () {} }` |
| `keyup` | 用户松开按键时触发。 源码在 `onKeyUp()` 中通过 `fireEvent()` 触发。 | `listeners: { keyup: function () {} }` |

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