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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.Display", {
  xtype: "displayfield",
  ariaRole: 'textbox',
  fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body',
  fieldCls: Ext.baseCSSPrefix + 'form-display-field',
  fieldSubTpl: [,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'textbox'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'textbox'` |
| `fieldBodyCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-display-field-body'` | 配置 `fieldBodyCls` 对应的 CSS 类名。 | `fieldBodyCls: Ext.baseCSSPrefix + 'form-display-field-body'` |
| `fieldCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-display-field'` | 配置 `fieldCls` 对应的 CSS 类名。 | `fieldCls: Ext.baseCSSPrefix + 'form-display-field'` |
| `fieldSubTpl` | `Array` | `[` | 字段 HTML 的子模板片段。 | `fieldSubTpl: [` |
| `htmlEncode` | `Boolean` | `false` | 控制是否启用 `htmlEncode` 行为。 | `htmlEncode: false` |
| `initEvents` | `Mixed` | `Ext.emptyFn` | 配置组件的 `initEvents` 选项。 | `initEvents: Ext.emptyFn` |
| `noWrap` | `Boolean` | `false` | 控制是否启用 `noWrap` 行为。 | `noWrap: false` |
| `readOnly` | `Boolean` | `true` | 控制字段是否只读。 | `readOnly: true` |
| `submitValue` | `Boolean` | `false` | 控制是否启用 `submitValue` 行为。 | `submitValue: false` |
| `validateOnChange` | `Boolean` | `false` | 控制是否启用 `validateOnChange` 行为。 | `validateOnChange: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `valueToRaw` | `value` | 将 `value` 转换为 `raw`。 | `component.valueToRaw(...)` |
| `isDirty` | `` | 判断 `dirty` 状态。 | `component.isDirty()` |
| `isValid` | `` | 判断 `valid` 状态。 | `component.isValid()` |
| `validate` | `` | 校验当前组件。 | `component.validate()` |
| `getRawValue` | `` | 读取并返回 `rawValue`。 | `component.getRawValue()` |
| `setRawValue` | `value` | 设置 `rawValue`。 执行时会刷新界面或布局、更新 `rawValue` 状态。源码涉及 `getDisplayValue()`、`updateLayout()`。 | `component.setRawValue(...)` |
| `getDisplayValue` | `` | 读取并返回 `displayValue`。源码涉及 `getRawValue()`。 | `component.getDisplayValue()` |
| `getSubTplData` | `` | 调用并直接返回父类的值，不对结果作额外转换。 | `component.getSubTplData()` |

## 事件

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

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