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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.Picker", {
  xtype: "pickerfield",
  createPicker: Ext.emptyFn,
  editable: true,
  matchFieldWidth: true,
  onCollapse: Ext.emptyFn,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `createPicker` | `Mixed` | `Ext.emptyFn` | 配置组件的 `createPicker` 选项。 | `createPicker: Ext.emptyFn` |
| `editable` | `Boolean` | `true` | 控制输入框内容是否允许直接编辑。 | `editable: true` |
| `matchFieldWidth` | `Boolean` | `true` | 控制是否启用 `matchFieldWidth` 行为。 | `matchFieldWidth: true` |
| `onCollapse` | `Mixed` | `Ext.emptyFn` | 配置 `onCollapse` 回调函数。 | `onCollapse: Ext.emptyFn` |
| `onExpand` | `Mixed` | `Ext.emptyFn` | 配置 `onExpand` 回调函数。 | `onExpand: Ext.emptyFn` |
| `openCls` | `Mixed` | `Ext.baseCSSPrefix + 'pickerfield-open'` | 配置 `openCls` 对应的 CSS 类名。 | `openCls: Ext.baseCSSPrefix + 'pickerfield-open'` |
| `pickerAlign` | `String` | `'tl-bl?'` | 配置组件的 `pickerAlign` 选项。 | `pickerAlign: 'tl-bl?'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addEvents()`。 | `component.initComponent()` |
| `initEvents` | `` | 初始化 `events`。 执行时会保留父类默认行为、更新 `keyNav` 状态。源码涉及 `callParent()`、`mon()`。 | `component.initEvents()` |
| `onEsc` | `e` | 处理 `esc` 回调。源码涉及 `collapse()`。 | `component.onEsc(...)` |
| `onDownArrow` | `e` | 处理 `downArrow` 回调。源码涉及 `onTriggerClick()`。 | `component.onDownArrow(...)` |
| `expand` | `` | 展开组件。 执行时会派发 `expand` 事件、更新 `expanding`、`isExpanded` 状态。源码涉及 `getPicker()`、`alignPicker()`、`mon()`、`fireEvent()`。 | `component.expand()` |
| `alignPicker` | `` | 对齐 `picker`。源码涉及 `getPicker()`、`doAlign()`。 | `component.alignPicker()` |
| `doAlign` | `` | 执行 `align` 操作。 | `component.doAlign()` |
| `collapse` | `` | 收起组件。 执行时会派发 `collapse` 事件、更新 `isExpanded` 状态。源码涉及 `fireEvent()`、`onCollapse()`。 | `component.collapse()` |
| `collapseIf` | `e` | 收起 `if`。源码涉及 `owns()`、`collapse()`。 | `component.collapseIf(...)` |
| `getPicker` | `` | 读取并返回 `picker`。 执行时会更新 `picker` 状态。源码涉及 `createPicker()`。 | `component.getPicker()` |
| `getRefItems` | `` | 读取并返回 `refItems`。 | `component.getRefItems()` |
| `onTriggerClick` | `` | 处理 `triggerClick` 回调。源码涉及 `collapse()`、`expand()`。 | `component.onTriggerClick()` |
| `onOtherFocus` | `dom` | 处理 `otherFocus` 回调。 执行时会保留父类默认行为。源码涉及 `owns()`、`callParent()`。 | `component.onOtherFocus(...)` |
| `triggerBlur` | `` | 触发 `blur`。 执行时会保留父类默认行为。源码涉及 `callParent()`、`collapse()`。 | `component.triggerBlur()` |
| `mimicBlur` | `e` | 模拟 `blur`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.mimicBlur(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `collapse` | 可折叠组件收起后触发。 源码在 `collapse()` 中通过 `fireEvent()` 触发。 | `listeners: { collapse: function () {} }` |
| `expand` | 可展开组件展开后触发。 源码在 `expand()` 中通过 `fireEvent()` 触发。 | `listeners: { expand: function () {} }` |
| `select` | 用户选中值或记录时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { select: function () {} }` |

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