/**
 * @class Ext.form.field.Spinner
 * @extends Ext.form.field.Trigger
 * <p>A field with a pair of up/down spinner buttons. This class is not normally instantiated directly,
 * instead it is subclassed and the {@link #onSpinUp} and {@link #onSpinDown} methods are implemented
 * to handle when the buttons are clicked. A good example of this is the {@link Ext.form.field.Number} field
 * which uses the spinner to increment and decrement the field's value by its {@link Ext.form.field.Number#step step}
 * config value.</p>
 * {@img Ext.form.field.Spinner/Ext.form.field.Spinner.png Ext.form.field.Spinner field}
 * 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 = me.step; // set the default value to the step value
                if(me.getValue() !== '') {
                    val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
                }                          
                me.setValue((val + me.step) + ' Pack');
            }
        },
       
        // override onSpinDown
        onSpinDown: function() {
            var me = this;
            if (!me.readOnly) {
                if(me.getValue() !== '') {
                    val = parseInt(me.getValue().slice(0, -5)); // gets rid of " Pack"
                }            
                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
        }]
    });
 * <p>By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods;
 * to prevent this, set <tt>{@link #keyNavEnabled} = false</tt>.</p>
 *
 */

Ext.define('Ext.form.field.Spinner', {
    extend
: 'Ext.form.field.Trigger',
    alias
: 'widget.spinnerfield',
    alternateClassName
: 'Ext.form.Spinner',
    requires
: ['Ext.util.KeyNav'],

    trigger1Cls
: Ext.baseCSSPrefix + 'form-spinner-up',
    trigger2Cls
: Ext.baseCSSPrefix + 'form-spinner-down',

    /**
     * @cfg {Boolean} spinUpEnabled
     * Specifies whether the up spinner button is enabled. Defaults to <tt>true</tt>. To change this
     * after the component is created, use the {@link #setSpinUpEnabled} method.
     */

    spinUpEnabled
: true,

    /**
     * @cfg {Boolean} spinDownEnabled
     * Specifies whether the down spinner button is enabled. Defaults to <tt>true</tt>. To change this
     * after the component is created, use the {@link #setSpinDownEnabled} method.
     */

    spinDownEnabled
: true,

    /**
     * @cfg {Boolean} keyNavEnabled
     * Specifies whether the up and down arrow keys should trigger spinning up and down.
     * Defaults to <tt>true</tt>.
     */

    keyNavEnabled
: true,

    /**
     * @cfg {Boolean} mouseWheelEnabled
     * Specifies whether the mouse wheel should trigger spinning up and down while the field has
     * focus. Defaults to <tt>true</tt>.
     */

    mouseWheelEnabled
: true,

    /**
     * @cfg {Boolean} repeatTriggerClick Whether a {@link Ext.util.ClickRepeater click repeater} should be
     * attached to the spinner buttons. Defaults to <tt>true</tt>.
     */

    repeatTriggerClick
: true,

    /**
     * This method is called when the spinner up button is clicked, or when the up arrow key is pressed
     * if {@link #keyNavEnabled} is <tt>true</tt>. Must be implemented by subclasses.
     */

    onSpinUp
: Ext.emptyFn,

    /**
     * This method is called when the spinner down button is clicked, or when the down arrow key is pressed
     * if {@link #keyNavEnabled} is <tt>true</tt>. Must be implemented by subclasses.
     */

    onSpinDown
: Ext.emptyFn,

    initComponent
: function() {
       
this.callParent();

       
this.addEvents(
            /**
             * @event spin
             * Fires when the spinner is made to spin up or down.
             * @param {Ext.form.field.Spinner} this
             * @param {String} direction Either 'up' if spinning up, or 'down' if spinning down.
             */

           
'spin',

            /**
             * @event spinup
             * Fires when the spinner is made to spin up.
             * @param {Ext.form.field.Spinner} this
             */

           
'spinup',

            /**
             * @event spindown
             * Fires when the spinner is made to spin down.
             * @param {Ext.form.field.Spinner} this
             */

           
'spindown'
       
);
   
},

    /**
     * @private override
     */

    onRender
: function() {
       
var me = this,
            triggers
;

        me
.callParent(arguments);
        triggers
= me.triggerEl;

        /**
         * @property spinUpEl
         * @type Ext.core.Element
         * The spinner up button element
         */

        me
.spinUpEl = triggers.item(0);
        /**
         * @property spinDownEl
         * @type Ext.core.Element
         * The spinner down button element
         */

        me
.spinDownEl = triggers.item(1);

       
// Set initial enabled/disabled states
        me
.setSpinUpEnabled(me.spinUpEnabled);
        me
.setSpinDownEnabled(me.spinDownEnabled);

       
// Init up/down arrow keys
       
if (me.keyNavEnabled) {
            me
.spinnerKeyNav = Ext.create('Ext.util.KeyNav', me.inputEl, {
                scope
: me,
                up
: me.spinUp,
                down
: me.spinDown
           
});
       
}

       
// Init mouse wheel
       
if (me.mouseWheelEnabled) {
            me
.mon(me.bodyEl, 'mousewheel', me.onMouseWheel, me);
       
}
   
},

    /**
     * @private override
     * Since the triggers are stacked, only measure the width of one of them.
     */

    getTriggerWidth
: function() {
       
return this.hideTrigger || this.readOnly ? 0 : this.spinUpEl.getWidth() + this.triggerWrap.getFrameWidth('lr');
   
},

    /**
     * @private Handles the spinner up button clicks.
     */

    onTrigger1Click
: function() {
       
this.spinUp();
   
},

    /**
     * @private Handles the spinner down button clicks.
     */

    onTrigger2Click
: function() {
       
this.spinDown();
   
},

    /**
     * Triggers the spinner to step up; fires the {@link #spin} and {@link #spinup} events and calls the
     * {@link #onSpinUp} method. Does nothing if the field is {@link #disabled} or if {@link #spinUpEnabled}
     * is false.
     */

    spinUp
: function() {
       
var me = this;
       
if (me.spinUpEnabled && !me.disabled) {
            me
.fireEvent('spin', me, 'up');
            me
.fireEvent('spinup', me);
            me
.onSpinUp();
       
}
   
},

    /**
     * Triggers the spinner to step down; fires the {@link #spin} and {@link #spindown} events and calls the
     * {@link #onSpinDown} method. Does nothing if the field is {@link #disabled} or if {@link #spinDownEnabled}
     * is false.
     */

    spinDown
: function() {
       
var me = this;
       
if (me.spinDownEnabled && !me.disabled) {
            me
.fireEvent('spin', me, 'down');
            me
.fireEvent('spindown', me);
            me
.onSpinDown();
       
}
   
},

    /**
     * Sets whether the spinner up button is enabled.
     * @param {Boolean} enabled true to enable the button, false to disable it.
     */

    setSpinUpEnabled
: function(enabled) {
       
var me = this,
            wasEnabled
= me.spinUpEnabled;
        me
.spinUpEnabled = enabled;
       
if (wasEnabled !== enabled && me.rendered) {
            me
.spinUpEl[enabled ? 'removeCls' : 'addCls'](me.trigger1Cls + '-disabled');
       
}
   
},

    /**
     * Sets whether the spinner down button is enabled.
     * @param {Boolean} enabled true to enable the button, false to disable it.
     */

    setSpinDownEnabled
: function(enabled) {
       
var me = this,
            wasEnabled
= me.spinDownEnabled;
        me
.spinDownEnabled = enabled;
       
if (wasEnabled !== enabled && me.rendered) {
            me
.spinDownEl[enabled ? 'removeCls' : 'addCls'](me.trigger2Cls + '-disabled');
       
}
   
},

    /**
     * @private
     * Handles mousewheel events on the field
     */

    onMouseWheel
: function(e) {
       
var me = this,
            delta
;
       
if (me.hasFocus) {
            delta
= e.getWheelDelta();
           
if (delta > 0) {
                me
.spinUp();
           
}
           
else if (delta < 0) {
                me
.spinDown();
           
}
            e
.stopEvent();
       
}
   
},

    onDestroy
: function() {
       
Ext.destroyMembers(this, 'spinnerKeyNav', 'spinUpEl', 'spinDownEl');
       
this.callParent();
   
}

});