Clear Up
SharpKit Reference

Spinner Class

A field with a pair of up/down spinner buttons. This class is not normally instantiated directly, instead it is subclassed and the onSpinUp and onSpinDown methods are implemented to handle when the buttons are clicked. A good example of this is the Ext.form.field.Number field which uses the spinner to increment and decrement the field's value by its step config value.

For example:

  
    Ext.define('Ext.ux.CustomSpinner', {
            extend: 'Ext.form.field.Spinner',
            alias: 'widget.customspinner',
            // override onSpinUp (using step isn't neccessary)
            onSpinUp: function() {
            var me = this;
            if (!me.readOnly) {
            var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
            me.setValue((val + me.step) + ' Pack');
            }
            },
            // override onSpinDown
            onSpinDown: function() {
            var val, me = this;
            if (!me.readOnly) {
            var val = parseInt(me.getValue().split(' '), 10)||0; // gets rid of " Pack", defaults to zero on parse failure
            if (val <= me.step) {
            me.setValue('Dry!');
            } else {
            me.setValue((val - me.step) + ' Pack');
            }
            }
            }
            });
            Ext.create('Ext.form.FormPanel', {
            title: 'Form with SpinnerField',
            bodyPadding: 5,
            width: 350,
            renderTo: Ext.getBody(),
            items:[{
            xtype: 'customspinner',
            fieldLabel: 'How Much Beer?',
            step: 6
            }]
            });
            

By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods; to prevent this, set keyNavEnabled = false.

Namespace: Ext.form.field

Derived Types

Constructors

Fields

Name Description
keyNavEnabled Specifies whether the up and down arrow keys should trigger spinning up and down. Defaults to true. Defaults to: true
mouseWheelEnabled Specifies whether the mouse wheel should trigger spinning up and down while the field has focus. Defaults to true. Defaults to: true
spinDownEnabled Specifies whether the down spinner button is enabled. Defaults to true. To change this after the component is created, use the setSpinDownEnabled method. Defaults to: true
spinUpEnabled Specifies whether the up spinner button is enabled. Defaults to true. To change this after the component is created, use the setSpinUpEnabled method. Defaults to: true

Methods

Name Description
onSpinDown() This method is called when the spinner down button is clicked, or when the down arrow key is pressed if keyNavEnabled is true. Must be implemented by subclasses.
onSpinUp() This method is called when the spinner up button is clicked, or when the up arrow key is pressed if keyNavEnabled is true. Must be implemented by subclasses.
setSpinDownEnabled(bool) Sets whether the spinner down button is enabled.
setSpinUpEnabled(bool) Sets whether the spinner up button is enabled.
spinDown() Triggers the spinner to step down; fires the spin and spindown events and calls the onSpinDown method. Does nothing if the field is disabled or if spinDownEnabled is false.
spinUp() Triggers the spinner to step up; fires the spin and spinup events and calls the onSpinUp method. Does nothing if the field is disabled or if spinUpEnabled is false.

Properties

Name Description
spinDownEl The spinner down button element
spinUpEl The spinner up button element
© Copyright 2005-2011 SharpKit. All rights reserved.