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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.File", {
  xtype: "file",
  buttonMargin: 3,
  buttonOnly: false,
  buttonText: 'Browse...',
  childEls: ['browseButtonWrap'],
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `buttonMargin` | `Number` | `3` | 配置组件的 `buttonMargin` 选项。 | `buttonMargin: 3` |
| `buttonOnly` | `Boolean` | `false` | 控制是否启用 `buttonOnly` 行为。 | `buttonOnly: false` |
| `buttonText` | `String` | `'Browse...'` | 配置组件的 `buttonText` 选项。 | `buttonText: 'Browse...'` |
| `childEls` | `Array` | `['browseButtonWrap']` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: ['browseButtonWrap']` |
| `clearOnSubmit` | `Boolean` | `false` | 控制是否启用 `clearOnSubmit` 行为。 | `clearOnSubmit: false` |
| `componentLayout` | `String` | `'triggerfield'` | 组件采用的内部布局策略。 | `componentLayout: 'triggerfield'` |
| `extraFieldBodyCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-file-wrap'` | 配置 `extraFieldBodyCls` 对应的 CSS 类名。 | `extraFieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap'` |
| `labelSeparator` | `String` | `''` | 配置组件的 `labelSeparator` 选项。 | `labelSeparator: ''` |
| `multiple` | `Boolean` | `false` | 控制是否启用 `multiple` 行为。 | `multiple: false` |
| `readOnly` | `Boolean` | `true` | 控制字段是否只读。 | `readOnly: true` |
| `setValue` | `Mixed` | `Ext.emptyFn` | 配置组件的 `setValue` 选项。 | `setValue: Ext.emptyFn` |
| `submitValue` | `Boolean` | `false` | 控制是否启用 `submitValue` 行为。 | `submitValue: false` |
| `triggerNoEditCls` | `String` | `''` | 配置 `triggerNoEditCls` 对应的 CSS 类名。 | `triggerNoEditCls: ''` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `name`、`button` 状态。源码涉及 `callParent()`、`getButtonMarginProp()`、`getName()`。 | `component.onRender()` |
| `getTriggerMarkup` | `` | 读取并返回 `triggerMarkup`。 | `component.getTriggerMarkup()` |
| `onFileChange` | `button, e, value` | 处理 `fileChange` 回调。 执行时会更新 `duringFileSelect` 状态。 | `component.onFileChange(...)` |
| `didValueChange` | `` | 处理 `didValueChange` 操作。 | `component.didValueChange()` |
| `reset` | `baseClearOnSubmit` | 将组件恢复为初始状态。 执行时会保留父类默认行为、派发 `change` 事件、更新 `removeFile`、`fileInputEl` 状态。源码涉及 `fireEvent()`、`callParent()`。 | `component.reset(...)` |
| `onShow` | `` | 处理 `show` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onShow()` |
| `onDisable` | `` | 处理 `disable` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDisable()` |
| `onEnable` | `` | 处理 `enable` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onEnable()` |
| `isFileUpload` | `` | 判断 `fileUpload` 状态。 | `component.isFileUpload()` |
| `extractFileInput` | `` | 处理 `extractFileInput` 操作。源码涉及 `reset()`、`getName()`。 | `component.extractFileInput()` |
| `restoreInput` | `el` | 还原 `input`。 执行时会更新 `fileInputEl` 状态。 | `component.restoreInput(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `getButtonMarginProp` | `` | 读取并返回 `buttonMarginProp`。 | `component.getButtonMarginProp()` |

## 事件

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

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