---
title: "Ext.picker.Month"
description: "xtype 为 monthpicker 的 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.picker.Month

源码定义：`ext-all-debug.js:106005`。分类：选择器与滑块。

## 创建示例

```javascript
var component = Ext.create("Ext.picker.Month", {
  xtype: "monthpicker",
  baseCls: Ext.baseCSSPrefix + 'monthpicker',
  cancelText: 'Cancel',
  childEls: [,
  measureMaxHeight: 20,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `baseCls` | `Mixed` | `Ext.baseCSSPrefix + 'monthpicker'` | 配置 `baseCls` 对应的 CSS 类名。 | `baseCls: Ext.baseCSSPrefix + 'monthpicker'` |
| `cancelText` | `String` | `'Cancel'` | 配置组件的 `cancelText` 选项。 | `cancelText: 'Cancel'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `measureMaxHeight` | `Number` | `20` | 配置组件的 `measureMaxHeight` 选项。 | `measureMaxHeight: 20` |
| `measureWidth` | `Number` | `35` | 配置组件的 `measureWidth` 选项。 | `measureWidth: 35` |
| `monthOffset` | `Number` | `6` | 配置组件的 `monthOffset` 选项。 | `monthOffset: 6` |
| `okText` | `String` | `'OK'` | 配置组件的 `okText` 选项。 | `okText: 'OK'` |
| `renderTpl` | `Array` | `[` | 配置生成组件内容的 `renderTpl` 模板。 | `renderTpl: [` |
| `showButtons` | `Boolean` | `true` | 控制是否显示 `buttons`。 | `showButtons: true` |
| `smallCls` | `Mixed` | `Ext.baseCSSPrefix + 'monthpicker-small'` | 配置 `smallCls` 对应的 CSS 类名。 | `smallCls: Ext.baseCSSPrefix + 'monthpicker-small'` |
| `totalYears` | `Number` | `10` | 配置组件的 `totalYears` 选项。 | `totalYears: 10` |
| `yearOffset` | `Number` | `5` | 配置组件的 `yearOffset` 选项。 | `yearOffset: 5` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新组件值、更新 `selectedCls`、`activeYear` 状态。源码涉及 `addEvents()`、`addCls()`、`setValue()`、`getYear()`。 | `component.initComponent()` |
| `beforeRender` | `` | 生成 `before` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `cacheWidth()`、`callParent()`、`getYears()`。 | `component.beforeRender()` |
| `cacheWidth` | `` | 缓存 `width`。源码涉及 `parseBox()`。 | `component.cacheWidth()` |
| `afterRender` | `` | 生成 `after` 的渲染结果。 执行时会保留父类默认行为、更新 `years`、`months` 状态。源码涉及 `callParent()`、`mon()`、`updateBody()`、`calculateMonthMargin()`。 | `component.afterRender()` |
| `calculateMonthMargin` | `` | 计算 `monthMargin`。源码涉及 `getLargest()`。 | `component.calculateMonthMargin()` |
| `getLargest` | `months` | 读取并返回 `largest`。 | `component.getLargest(...)` |
| `setValue` | `value` | 设置 `value`。 执行时会更新 `value`、`activeYear` 状态。源码涉及 `updateBody()`。 | `component.setValue(...)` |
| `getValue` | `` | 读取并返回 `value`。 | `component.getValue()` |
| `hasSelection` | `` | 检查是否存在 `selection`。 | `component.hasSelection()` |
| `getYears` | `` | 读取并返回 `years`。 | `component.getYears()` |
| `updateBody` | `` | 更新 `body`。源码涉及 `getYears()`、`getYear()`。 | `component.updateBody()` |
| `getYear` | `defaultValue, offset` | 读取并返回 `year`。 | `component.getYear(...)` |
| `onBodyClick` | `e, t` | 处理 `bodyClick` 回调。源码涉及 `onMonthClick()`、`onYearClick()`。 | `component.onBodyClick(...)` |
| `adjustYear` | `offset` | 调整 `year`。源码涉及 `updateBody()`。 | `component.adjustYear(...)` |
| `onOkClick` | `` | 处理 `okClick` 回调。 执行时会派发 `okclick` 事件。源码涉及 `fireEvent()`。 | `component.onOkClick()` |
| `onCancelClick` | `` | 处理 `cancelClick` 回调。 执行时会派发 `cancelclick` 事件。源码涉及 `fireEvent()`。 | `component.onCancelClick()` |
| `onMonthClick` | `target, isDouble` | 处理 `monthClick` 回调。 执行时会派发 `month`、`select` 事件。源码涉及 `resolveOffset()`、`updateBody()`、`fireEvent()`。 | `component.onMonthClick(...)` |
| `onYearClick` | `target, isDouble` | 处理 `yearClick` 回调。 执行时会派发 `year`、`select` 事件。源码涉及 `resolveOffset()`、`updateBody()`、`fireEvent()`。 | `component.onYearClick(...)` |
| `resolveOffset` | `index, offset` | 解析 `offset`。 | `component.resolveOffset(...)` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为、更新 `years`、`months` 状态。源码涉及 `callParent()`。 | `component.beforeDestroy()` |
| `finishRenderChildren` | `` | 完成 `renderChildren`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.finishRenderChildren()` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `cancelclick` | 用户点击取消按钮时触发。 源码在 `onCancelClick()` 中通过 `fireEvent()` 触发。 | `listeners: { cancelclick: function () {} }` |
| `monthclick` | 用户点击月份时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { monthclick: function () {} }` |
| `monthdblclick` | 用户双击月份时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { monthdblclick: function () {} }` |
| `okclick` | 用户点击确认按钮时触发。 源码在 `onOkClick()` 中通过 `fireEvent()` 触发。 | `listeners: { okclick: function () {} }` |
| `select` | 用户选中值或记录时触发。 源码在 `onMonthClick()`、`onYearClick()` 中通过 `fireEvent()` 触发。 | `listeners: { select: function () {} }` |
| `yearclick` | 用户点击年份时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { yearclick: function () {} }` |
| `yeardblclick` | 用户双击年份时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { yeardblclick: function () {} }` |

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