Ext.form.field.Spinner | WebBuilder 文档

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

创建示例

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 () {} }`