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

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

## 创建示例

```javascript
var component = Ext.create("Ext.form.field.Spinner", {
  xtype: "spinnerfield",
  ariaRole: 'spinbutton',
  keyNavEnabled: true,
  mouseWheelEnabled: true,
  onSpinDown: Ext.emptyFn,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `ariaRole` | `String` | `'spinbutton'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'spinbutton'` |
| `keyNavEnabled` | `Boolean` | `true` | 控制是否启用 `keyNavEnabled` 行为。 | `keyNavEnabled: true` |
| `mouseWheelEnabled` | `Boolean` | `true` | 控制是否启用 `mouseWheelEnabled` 行为。 | `mouseWheelEnabled: true` |
| `onSpinDown` | `Mixed` | `Ext.emptyFn` | 配置 `onSpinDown` 回调函数。 | `onSpinDown: Ext.emptyFn` |
| `onSpinUp` | `Mixed` | `Ext.emptyFn` | 配置 `onSpinUp` 回调函数。 | `onSpinUp: Ext.emptyFn` |
| `repeatTriggerClick` | `Boolean` | `true` | 控制是否启用 `repeatTriggerClick` 行为。 | `repeatTriggerClick: true` |
| `spinDownEnabled` | `Boolean` | `true` | 控制是否启用 `spinDownEnabled` 行为。 | `spinDownEnabled: true` |
| `spinUpEnabled` | `Boolean` | `true` | 控制是否启用 `spinUpEnabled` 行为。 | `spinUpEnabled: true` |
| `trigger1Cls` | `Mixed` | `Ext.baseCSSPrefix + 'form-spinner-up'` | 配置 `trigger1Cls` 对应的 CSS 类名。 | `trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up'` |
| `trigger2Cls` | `Mixed` | `Ext.baseCSSPrefix + 'form-spinner-down'` | 配置 `trigger2Cls` 对应的 CSS 类名。 | `trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down'` |
| `triggerTpl` | `String` | `'<td style="{triggerStyle}" class="{triggerCl...` | 配置生成组件内容的 `triggerTpl` 模板。 | `triggerTpl: '<td style="{triggerStyle}" class="{triggerCl...` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为。源码涉及 `callParent()`、`addEvents()`。 | `component.initComponent()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为、更新 `spinUpEl`、`spinDownEl` 状态。源码涉及 `callParent()`、`mon()`。 | `component.onRender()` |
| `getSubTplMarkup` | `values` | 读取并返回 `subTplMarkup`。源码涉及 `getTriggerMarkup()`。 | `component.getSubTplMarkup(...)` |
| `getTriggerMarkup` | `` | 读取并返回 `triggerMarkup`。源码涉及 `getTpl()`、`getTriggerData()`。 | `component.getTriggerMarkup()` |
| `getTriggerData` | `` | 读取并返回 `triggerData`。 | `component.getTriggerData()` |
| `getTriggerWidth` | `` | 读取并返回 `triggerWidth`。 | `component.getTriggerWidth()` |
| `onTrigger1Click` | `` | 处理 `trigger1Click` 回调。源码涉及 `spinUp()`。 | `component.onTrigger1Click()` |
| `onTrigger2Click` | `` | 处理 `trigger2Click` 回调。源码涉及 `spinDown()`。 | `component.onTrigger2Click()` |
| `onTriggerWrapMouseup` | `` | 处理 `triggerWrapMouseup` 回调。 | `component.onTriggerWrapMouseup()` |
| `spinUp` | `` | 执行微调 `up`。 执行时会派发 `spin`、`spinup` 事件。源码涉及 `fireEvent()`、`onSpinUp()`。 | `component.spinUp()` |
| `spinDown` | `` | 执行微调 `down`。 执行时会派发 `spin`、`spindown` 事件。源码涉及 `fireEvent()`、`onSpinDown()`。 | `component.spinDown()` |
| `setSpinUpEnabled` | `enabled` | 设置 `spinUpEnabled`。 执行时会更新 `spinUpEnabled` 状态。 | `component.setSpinUpEnabled(...)` |
| `setSpinDownEnabled` | `enabled` | 设置 `spinDownEnabled`。 执行时会更新 `spinDownEnabled` 状态。 | `component.setSpinDownEnabled(...)` |
| `onMouseWheel` | `e` | 处理 `mouseWheel` 回调。源码涉及 `spinUp()`、`spinDown()`。 | `component.onMouseWheel(...)` |
| `onDestroy` | `` | 处理 `destroy` 回调。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `spin` | 微调字段执行增减操作后触发。 源码在 `spinUp()`、`spinDown()` 中通过 `fireEvent()` 触发。 | `listeners: { spin: function () {} }` |
| `spindown` | 微调字段向下减少后触发。 源码在 `spinDown()` 中通过 `fireEvent()` 触发。 | `listeners: { spindown: function () {} }` |
| `spinup` | 微调字段向上增加后触发。 源码在 `spinUp()` 中通过 `fireEvent()` 触发。 | `listeners: { spinup: function () {} }` |

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