/** * Wraps a Ext.form.Number field to provide a number input field with up/down spinner button and * optional step value for each spin up/down increment/decrement. * * Example usage: * * @example * var spinner = Ext.create('Ext.field.Spinner', { * label: 'Spinner Field', * minValue: 0, * maxValue: 100, * stepValue: 2, * cycle: true * }); * Ext.Viewport.add({ xtype: 'container', items: [spinner] }); * */Ext.define('Ext.field.Spinner', { extend: 'Ext.field.Number', xtype: 'spinnerfield', alternateClassName: 'Ext.form.Spinner', requires: [ 'Ext.field.trigger.SpinDown', 'Ext.field.trigger.SpinUp' ], /** * @event spin * Fires when the value is changed via either spinner buttons. * @param {Ext.field.Spinner} this * @param {Number} value * @param {String} direction 'up' or 'down'. */ /** * @event spindown * Fires when the value is changed via the spinner down button. * @param {Ext.field.Spinner} this * @param {Number} value */ /** * @event spinup * Fires when the value is changed via the spinner up button. * @param {Ext.field.Spinner} this * @param {Number} value */ /** * @event updatedata * @hide */ /** * @event action * @hide */ config: { /** * @cfg {Number} stepValue * Value that is added or subtracted from the current value when a spinner * is tapped. */ stepValue: 1, /** * @cfg {Boolean} accelerateOnTapHold * `true` if autorepeating should start slowly and accelerate. */ accelerateOnTapHold: true, /** * @cfg {Boolean} cycle * When set to `true`, it will loop the values of a minimum or maximum is * reached. If the maximum value is reached, the value will be set to the * minimum. */ cycle: false, /** * @cfg clearable * @inheritdoc */ clearable: false, /** * @cfg {Boolean} groupButtons * `true` if you want to group the buttons to the right of the fields. `false` if * you want the buttons to be at either side of the field. * @deprecated 6.2.0 This concern should be handled by the theme. */ groupButtons: true }, triggers: { spindown: { type: 'spindown', group: 'spin', repeat: true }, spinup: { type: 'spinup', group: 'spin', repeat: true } }, /** * @cfg value * @inheritdoc */ value: 0, /** * @cfg decimals * @inheritdoc */ decimals: 0, /** * @property classCls * @inheritdoc */ classCls: Ext.baseCSSPrefix + 'spinnerfield', groupedButtonsCls: Ext.baseCSSPrefix + 'grouped-buttons', initElement: function() { this.callParent(); this.inputElement.dom.readOnly = true; }, updateGroupButtons: function(groupButtons) { var downTrigger = this.getTriggers().spindown; downTrigger.setGroup(groupButtons ? 'spin' : null); downTrigger.setSide(groupButtons ? null : 'left'); }, applyTriggers: function(triggers, oldTriggers) { var accelerate = this.getAccelerateOnTapHold(), upTrigger, downTrigger, upRepeat, downRepeat; if (triggers && accelerate) { upTrigger = triggers.spinup; downTrigger = triggers.spindown; upRepeat = upTrigger.repeat; if (upRepeat) { upTrigger.repeat = Ext.apply({ accelerate: accelerate }, upRepeat); } downRepeat = downTrigger.repeat; if (downRepeat) { downTrigger.repeat = Ext.apply({ accelerate: accelerate }, downRepeat); } } return this.callParent([triggers, oldTriggers]); }, onKeyDown: function(e) { var limit; if (this.getInputType() !== 'number') { switch (e.getKey()) { case e.UP: e.stopEvent(); this.spin(false); break; case e.DOWN: e.stopEvent(); this.spin(true); break; // Home and End keys: https://www.w3.org/TR/wai-aria-practices-1.1/#spinbutton case e.HOME: limit = this.getMinValue(); if (limit != null) { e.stopEvent(); this.setValue(limit); } break; case e.END: limit = this.getMaxValue(); if (limit != null) { e.stopEvent(); this.setValue(limit); } break; } } this.callParent([e]); }, /** * @private */ onSpinDown: function() { if (!this.getDisabled() && !this.getReadOnly()) { this.spin(true); } }, /** * @private */ onSpinUp: function() { if (!this.getDisabled() && !this.getReadOnly()) { this.spin(false); } }, /** * @private */ spin: function(down) { var me = this, originalValue = me.getValue(), stepValue = me.getStepValue(), direction = down ? 'down' : 'up', minValue = me.getMinValue(), maxValue = me.getMaxValue(), value; if (down) { value = originalValue - stepValue; } else { value = originalValue + stepValue; } //if cycle is true, then we need to check fi the value hasn't changed and we cycle the value if (me.getCycle()) { if (originalValue == minValue && value < minValue) { value = maxValue; } if (originalValue == maxValue && value > maxValue) { value = minValue; } } else if (minValue != null && value < minValue) { value = minValue; } else if (maxValue != null && value > maxValue) { value = maxValue; } me.spinning = true; me.setValue(value); me.spinning = false; value = me.getValue(); me.fireEvent('spin', me, value, direction); me.fireEvent('spin' + direction, me, value); }, privates: { spinning: false, canSetInputValue: function() { return this.spinning || this.callParent(); } }});