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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.Trigger", {
  xtype: "triggerfield",
  autoSize: Ext.emptyFn,
  childEls: [,
  componentLayout: 'triggerfield',
  editable: true,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `autoSize` | `Mixed` | `Ext.emptyFn` | 配置组件的 `autoSize` 选项。 | `autoSize: Ext.emptyFn` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `componentLayout` | `String` | `'triggerfield'` | 组件采用的内部布局策略。 | `componentLayout: 'triggerfield'` |
| `editable` | `Boolean` | `true` | 控制输入框内容是否允许直接编辑。 | `editable: true` |
| `extraTriggerCls` | `String` | `''` | 配置 `extraTriggerCls` 对应的 CSS 类名。 | `extraTriggerCls: ''` |
| `hideTrigger` | `Boolean` | `false` | 控制是否隐藏 `trigger`。 | `hideTrigger: false` |
| `mimicing` | `Boolean` | `false` | 控制是否启用 `mimicing` 行为。 | `mimicing: false` |
| `monitorTab` | `Boolean` | `true` | 控制是否启用 `monitorTab` 行为。 | `monitorTab: true` |
| `onTriggerClick` | `Mixed` | `Ext.emptyFn` | 配置 `onTriggerClick` 回调函数。 | `onTriggerClick: Ext.emptyFn` |
| `onTriggerWrapMouseup` | `Mixed` | `Ext.emptyFn` | 配置 `onTriggerWrapMouseup` 回调函数。 | `onTriggerWrapMouseup: Ext.emptyFn` |
| `readOnly` | `Boolean` | `false` | 控制字段是否只读。 | `readOnly: false` |
| `repeatTriggerClick` | `Boolean` | `false` | 控制是否启用 `repeatTriggerClick` 行为。 | `repeatTriggerClick: false` |
| `triggerBaseCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-trigger'` | 配置 `triggerBaseCls` 对应的 CSS 类名。 | `triggerBaseCls: Ext.baseCSSPrefix + 'form-trigger'` |
| `triggerIndexRe` | `Mixed` | `/trigger-index-(\d+)/` | 配置组件的 `triggerIndexRe` 选项。 | `triggerIndexRe: /trigger-index-(\d+)/` |
| `triggerNoEditCls` | `Mixed` | `Ext.baseCSSPrefix + 'trigger-noedit'` | 配置 `triggerNoEditCls` 对应的 CSS 类名。 | `triggerNoEditCls: Ext.baseCSSPrefix + 'trigger-noedit'` |
| `triggerWrapCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-trigger-wrap'` | 配置 `triggerWrapCls` 对应的 CSS 类名。 | `triggerWrapCls: Ext.baseCSSPrefix + 'form-trigger-wrap'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `wrapFocusCls` 状态。源码涉及 `callParent()`。 | `component.initComponent()` |
| `initEvents` | `` | 初始化 `events`。 执行时会保留父类默认行为。源码涉及 `mon()`、`callParent()`。 | `component.initEvents()` |
| `getSubTplMarkup` | `values` | 读取并返回 `subTplMarkup`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`getTriggerMarkup()`。 | `component.getSubTplMarkup(...)` |
| `getSubTplData` | `` | 读取并返回 `subTplData`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getSubTplData()` |
| `getLabelableRenderData` | `` | 读取并返回 `labelableRenderData`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`getTriggerMarkup()`。 | `component.getLabelableRenderData()` |
| `getTriggerMarkup` | `` | 读取并返回 `triggerMarkup`。 执行时会更新 `trigger1Cls` 状态。 | `component.getTriggerMarkup()` |
| `disableCheck` | `` | 禁用 `check`。 | `component.disableCheck()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为、更新 `lastTriggerStateFlags` 状态。源码涉及 `callParent()`、`addChildEls()`、`getTriggerStateFlags()`。 | `component.beforeRender()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `doc` 状态。源码涉及 `callParent()`、`initTrigger()`。 | `component.onRender()` |
| `getTriggerWidth` | `` | 读取并返回 `triggerWidth`。 | `component.getTriggerWidth()` |
| `setHideTrigger` | `hideTrigger` | 设置 `hideTrigger`。 执行时会刷新界面或布局、更新 `hideTrigger` 状态。源码涉及 `updateLayout()`。 | `component.setHideTrigger(...)` |
| `setEditable` | `editable` | 设置 `editable`。 执行时会刷新界面或布局、更新 `editable` 状态。源码涉及 `updateLayout()`。 | `component.setEditable(...)` |
| `setReadOnly` | `readOnly` | 设置 `readOnly`。 执行时会保留父类默认行为、刷新界面或布局。源码涉及 `callParent()`、`updateLayout()`。 | `component.setReadOnly(...)` |
| `initTrigger` | `` | 初始化 `trigger`。 执行时会更新 `triggerRepeater` 状态。源码涉及 `mon()`。 | `component.initTrigger()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |
| `onFocus` | `` | 处理 `focus` 回调。 执行时会保留父类默认行为、更新 `otherFocused`、`mimicing` 状态。源码涉及 `callParent()`、`mon()`、`on()`。 | `component.onFocus()` |
| `checkTab` | `me, e` | 处理 `checkTab` 操作。源码涉及 `triggerBlur()`。 | `component.checkTab(...)` |
| `getTriggerStateFlags` | `` | 读取并返回 `triggerStateFlags`。 | `component.getTriggerStateFlags()` |
| `onOtherFocus` | `dom` | 处理 `otherFocus` 回调。 执行时会更新 `otherFocused` 状态。 | `component.onOtherFocus(...)` |
| `onBlur` | `` | 处理 `blur` 回调。 执行时会更新 `otherFocused` 状态。源码涉及 `triggerBlur()`。 | `component.onBlur()` |
| `mimicBlur` | `e` | 模拟 `blur`。源码涉及 `triggerBlur()`。 | `component.mimicBlur(...)` |
| `triggerBlur` | `e` | 触发 `blur`。 执行时会更新 `mimicing` 状态。源码涉及 `mun()`、`un()`。 | `component.triggerBlur(...)` |
| `onTriggerWrapClick` | `` | 处理 `triggerWrapClick` 回调。 | `component.onTriggerWrapClick()` |

## 事件

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

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