    /**
     * The Number field creates an HTML5 number input and is usually created inside a form. Because it creates an HTML
     * number input field, most browsers will show a specialized virtual keyboard for entering numbers. The Number field
     * only accepts numerical input and also provides additional spinner UI that increases or decreases the current value
     * by a configured {@link #stepValue step value}. Here's how we might use one in a form:
     *
     *     Ext.create('Ext.form.Panel', {
     *         tbar: {
     *             text: 'Register'
     *         },
     *
     *         items: [
     *             {
     *                 xtype: 'numberfield',
     *                 label: 'Age',
     *                 minValue: 18,
     *                 maxValue: 150,
     *                 name: 'age'
     *             }
     *         ]
     *     }).show();
     *
     * Or on its own, outside of a form:
     *
     *     Ext.create('Ext.field.Number', {
     *         label: 'Age',
     *         value: '26'
     *     }).show();
     *
     * ## minValue, maxValue and stepValue
     *
     * The {@link #minValue} and {@link #maxValue} configurations are self-explanatory and simply constrain the value
     * entered to the range specified by the configured min and max values. The other option exposed by this component
     * is {@link #stepValue}, which enables you to set how much the value changes every time the up and down spinners
     * are tapped on. For example, to create a salary field that ticks up and down by $1,000 each tap we can do this:
     *
     *     Ext.create('Ext.field.Number', {
     *         label: 'Salary',
     *         value: 30000,
     *         minValue: 25000,
     *         maxValue: 50000,
     *         stepValue: 1000
     *     });
     *
     * This creates a field that starts with a value of $30,000, steps up and down in $1,000 increments and will not go
     * beneath $25,000 or above $50,000.
     *
     * Because number field inherits from {@link Ext.field.Text textfield} it gains all of the functionality that text
     * fields provide, including getting and setting the value at runtime, validations and various events that are fired as
     * the user interacts with the component. Check out the {@link Ext.field.Text} docs to see the additional functionality
     * available.
     */
    Ext.define('Ext.field.Number', {
        extend: 'Ext.field.Text',
        xtype: 'numberfield',
        alternateClassName: 'Ext.form.Number',

        config: {
            // @inherit
            component: {
                type: 'number'
            },

            // @inherit
            ui: 'number'
        },

        proxyConfig: {
            /**
             * @cfg {Number} minValue The minimum value that this Number field can accept
             * @accessor
             */
            minValue: null,

            /**
             * @cfg {Number} maxValue The maximum value that this Number field can accept
             * @accessor
             */
            maxValue: null,

            /**
             * @cfg {Number} stepValue The amount by which the field is incremented or decremented each time the spinner is tapped.
             * Defaults to undefined, which means that the field goes up or down by 1 each time the spinner is tapped
             * @accessor
             */
            stepValue: null
        },

        applyValue: function(value) {
            var minValue = this.getMinValue(),
                maxValue = this.getMaxValue();

            if (Ext.isNumber(minValue)) {
                value = Math.max(value, minValue);
            }

            if (Ext.isNumber(maxValue)) {
                value = Math.min(value, maxValue);
            }

            return parseFloat(value);
        },

        getValue: function() {
            var value = this.callParent();
            return parseFloat(value || 0);
        },

        doClearIconTap: function(me, e) {
            me.setValue(0);
        }
    });