    /**
     * Specialized {@link Ext.field.Slider} with a single thumb which only supports two {@link #value values}.
     *
     * ## Examples
     *
     *     @example preview
     *     Ext.Viewport.add({
     *         xtype: 'togglefield',
     *         name: 'awesome',
     *         label: 'Are you awesome?',
     *         labelWidth: '40%'
     *     });
     *
     * Having a default value of 'toggled':
     *
     *     @example preview
     *     Ext.Viewport.add({
     *         xtype: 'togglefield',
     *         name: 'awesome',
     *         value: 1,
     *         label: 'Are you awesome?',
     *         labelWidth: '40%'
     *     });
     *
     * And using the {@link #value} {@link #toggle} method:
     *
     *     @example preview
     *     Ext.Viewport.add(
     *         {
     *             xtype: 'togglefield',
     *             name: 'awesome',
     *             value: 1,
     *             label: 'Are you awesome?',
     *             labelWidth: '40%'
     *         },
     *         {
     *             xtype: 'toolbar',
     *             docked: 'top',
     *             items: [
     *                 {
     *                     xtype: 'button',
     *                     text: 'Toggle',
     *                     flex: 1,
     *                     handler: function() {
     *                         Ext.ComponentQuery.query('togglefield')[0].toggle();
     *                     }
     *                 }
     *             ]
     *         }
     *     );
     */
    Ext.define('Ext.field.Toggle', {
        extend: 'Ext.field.Slider',
        xtype : 'togglefield',
        alternateClassName: 'Ext.form.Toggle',
        requires: ['Ext.slider.Toggle'],

        config: {
            // @inherit
            cls: 'x-toggle-field'
        },

        proxyConfig: {
            /**
             * @cfg {String} minValueCls See {@link Ext.slider.Toggle#minValueCls}
             * @accessor
             */
            minValueCls: 'x-toggle-off',

            /**
             * @cfg {String} maxValueCls  See {@link Ext.slider.Toggle#maxValueCls}
             * @accessor
             */
            maxValueCls: 'x-toggle-on'
        },

        // @private
        applyComponent: function(config) {
            return Ext.factory(config, Ext.slider.Toggle);
        },

        /**
         * Sets the value of the toggle.
         * @param {Number} value **1** for toggled, **0** for untoggled.
         */
        setValue: function(newValue) {
            if (newValue === true) {
                newValue = 1;
            }

            this.getComponent().setValue(newValue);

            return this;
        },

        /**
         * Toggles the value of this toggle field.
         * @return this
         */
        toggle: function() {
            var value = this.getValue();
            this.setValue((value == 1) ? 0 : 1);

            return this;
        }
    });