3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
17 * instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
18 * to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number}
19 * field which uses the spinner to increment and decrement the field's value by its
20 * {@link Ext.form.field.Number#step step} config value.
25 * Ext.define('Ext.ux.CustomSpinner', {
26 * extend: 'Ext.form.field.Spinner',
27 * alias: 'widget.customspinner',
29 * // override onSpinUp (using step isn't neccessary)
30 * onSpinUp: function() {
33 * var val = me.step; // set the default value to the step value
34 * if(me.getValue() !== '') {
35 * val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
37 * me.setValue((val + me.step) + ' Pack');
41 * // override onSpinDown
42 * onSpinDown: function() {
45 * if(me.getValue() !== '') {
46 * val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
48 * me.setValue((val - me.step) + ' Pack');
53 * Ext.create('Ext.form.FormPanel', {
54 * title: 'Form with SpinnerField',
57 * renderTo: Ext.getBody(),
59 * xtype: 'customspinner',
60 * fieldLabel: 'How Much Beer?',
65 * By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
66 * to prevent this, set `{@link #keyNavEnabled} = false`.
68 Ext.define('Ext.form.field.Spinner', {
69 extend: 'Ext.form.field.Trigger',
70 alias: 'widget.spinnerfield',
71 alternateClassName: 'Ext.form.Spinner',
72 requires: ['Ext.util.KeyNav'],
74 trigger1Cls: Ext.baseCSSPrefix + 'form-spinner-up',
75 trigger2Cls: Ext.baseCSSPrefix + 'form-spinner-down',
78 * @cfg {Boolean} spinUpEnabled
79 * Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is
80 * created, use the {@link #setSpinUpEnabled} method.
85 * @cfg {Boolean} spinDownEnabled
86 * Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is
87 * created, use the {@link #setSpinDownEnabled} method.
89 spinDownEnabled: true,
92 * @cfg {Boolean} keyNavEnabled
93 * Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true.
98 * @cfg {Boolean} mouseWheelEnabled
99 * Specifies whether the mouse wheel should trigger spinning up and down while the field has focus.
102 mouseWheelEnabled: true,
105 * @cfg {Boolean} repeatTriggerClick
106 * Whether a {@link Ext.util.ClickRepeater click repeater} should be attached to the spinner buttons.
109 repeatTriggerClick: true,
114 * This method is called when the spinner up button is clicked, or when the up arrow key is pressed if
115 * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
117 onSpinUp: Ext.emptyFn,
122 * This method is called when the spinner down button is clicked, or when the down arrow key is pressed if
123 * {@link #keyNavEnabled} is true. Must be implemented by subclasses.
125 onSpinDown: Ext.emptyFn,
127 initComponent: function() {
133 * Fires when the spinner is made to spin up or down.
134 * @param {Ext.form.field.Spinner} this
135 * @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
141 * Fires when the spinner is made to spin up.
142 * @param {Ext.form.field.Spinner} this
148 * Fires when the spinner is made to spin down.
149 * @param {Ext.form.field.Spinner} this
159 onRender: function() {
163 me.callParent(arguments);
164 triggers = me.triggerEl;
167 * @property {Ext.Element} spinUpEl
168 * The spinner up button element
170 me.spinUpEl = triggers.item(0);
172 * @property {Ext.Element} spinDownEl
173 * The spinner down button element
175 me.spinDownEl = triggers.item(1);
177 // Set initial enabled/disabled states
178 me.setSpinUpEnabled(me.spinUpEnabled);
179 me.setSpinDownEnabled(me.spinDownEnabled);
181 // Init up/down arrow keys
182 if (me.keyNavEnabled) {
183 me.spinnerKeyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
191 if (me.mouseWheelEnabled) {
192 me.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
198 * Override. Since the triggers are stacked, only measure the width of one of them.
200 getTriggerWidth: function() {
201 return this.hideTrigger || this.readOnly ? 0 : this.spinUpEl.getWidth() + this.triggerWrap.getFrameWidth('lr');
206 * Handles the spinner up button clicks.
208 onTrigger1Click: function() {
214 * Handles the spinner down button clicks.
216 onTrigger2Click: function() {
221 * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
222 * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
227 if (me.spinUpEnabled && !me.disabled) {
228 me.fireEvent('spin', me, 'up');
229 me.fireEvent('spinup', me);
235 * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
236 * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
239 spinDown: function() {
241 if (me.spinDownEnabled && !me.disabled) {
242 me.fireEvent('spin', me, 'down');
243 me.fireEvent('spindown', me);
249 * Sets whether the spinner up button is enabled.
250 * @param {Boolean} enabled true to enable the button, false to disable it.
252 setSpinUpEnabled: function(enabled) {
254 wasEnabled = me.spinUpEnabled;
255 me.spinUpEnabled = enabled;
256 if (wasEnabled !== enabled && me.rendered) {
257 me.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
262 * Sets whether the spinner down button is enabled.
263 * @param {Boolean} enabled true to enable the button, false to disable it.
265 setSpinDownEnabled: function(enabled) {
267 wasEnabled = me.spinDownEnabled;
268 me.spinDownEnabled = enabled;
269 if (wasEnabled !== enabled && me.rendered) {
270 me.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
276 * Handles mousewheel events on the field
278 onMouseWheel: function(e) {
282 delta = e.getWheelDelta();
286 else if (delta < 0) {
293 onDestroy: function() {
294 Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');