---
title: "Ext.ux.form.MonthField"
description: "xtype 为 monthfield 的 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.ux.form.MonthField

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

## 创建示例

```javascript
var component = Ext.create("Ext.ux.form.MonthField", {
  xtype: "monthfield",
  altFormats: "m/y|m/Y|m-y|m-Y|my|mY|y/m|Y/m|y-m|Y-m|ym|Ym",
  format: "Y-m",
  matchFieldWidth: false,
  startDay: new Date(),
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `altFormats` | `String` | `"m/y\|m/Y\|m-y\|m-Y\|my\|mY\|y/m\|Y/m\|y-m\|Y-m\|ym\|Ym"` | 配置组件的 `altFormats` 选项。 | `altFormats: "m/y\|m/Y\|m-y\|m-Y\|my\|mY\|y/m\|Y/m\|y-m\|Y-m\|ym\|Ym"` |
| `format` | `String` | `"Y-m"` | 值显示与解析时使用的格式。 | `format: "Y-m"` |
| `matchFieldWidth` | `Boolean` | `false` | 控制是否启用 `matchFieldWidth` 行为。 | `matchFieldWidth: false` |
| `startDay` | `Mixed` | `new Date()` | 配置组件的 `startDay` 选项。 | `startDay: new Date()` |
| `triggerCls` | `Mixed` | `Ext.baseCSSPrefix + 'form-date-trigger'` | 配置 `triggerCls` 对应的 CSS 类名。 | `triggerCls: Ext.baseCSSPrefix + 'form-date-trigger'` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `disabledDatesRE` 状态。源码涉及 `callParent()`。 | `component.initComponent()` |
| `initValue` | `` | 初始化 `value`。 执行时会保留父类默认行为、更新 `value`、`startDay` 状态。源码涉及 `callParent()`。 | `component.initValue()` |
| `rawToValue` | `rawValue` | 将 `raw` 转换为 `value`。 | `component.rawToValue(...)` |
| `valueToRaw` | `value` | 将 `value` 转换为 `raw`。源码涉及 `formatDate()`。 | `component.valueToRaw(...)` |
| `formatDate` | `date` | 格式化 `date`。 | `component.formatDate(...)` |
| `createPicker` | `` | 创建 `picker`。 | `component.createPicker()` |
| `onExpand` | `` | 处理 `expand` 回调。 | `component.onExpand()` |
| `onOkClick` | `picker, value` | 处理 `okClick` 回调。 执行时会更新组件值、更新 `startDay` 状态。源码涉及 `setValue()`。 | `component.onOkClick(...)` |
| `onCancelClick` | `` | 处理 `cancelClick` 回调。 | `component.onCancelClick()` |

## 事件

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

Source: https://ag.879818327.xyz/ext/form/ux-form-monthfield/index.mdx