    /**
     * @class Ext.button.Cycle
     * @extends Ext.button.Split
     * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
     * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
     * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
     * button displays the dropdown menu just like a normal SplitButton.
     * {@img Ext.button.Cycle/Ext.button.Cycle.png Ext.button.Cycle component}
     * Example usage:
     * <pre><code>
    Ext.create('Ext.button.Cycle', {
        showText: true,
        prependText: 'View as ',
        renderTo: Ext.getBody(),
        menu: {
            id: 'view-type-menu',
            items: [{
                text:'text only',
                iconCls:'view-text',
                checked:true
            },{
                text:'HTML',
                iconCls:'view-html'
            }]
        },
        changeHandler:function(cycleBtn, activeItem){
            Ext.Msg.alert('Change View', activeItem.text);
        }
    });
    </code></pre>
     * @constructor
     * Create a new split button
     * @param {Object} config The config object
     * @xtype cycle
     */

    Ext.define('Ext.button.Cycle', {

        /* Begin Definitions */

        alias: 'widget.cycle',

        extend: 'Ext.button.Split',
        alternateClassName: 'Ext.CycleButton',

        /* End Definitions */

        /**
         * @cfg {Array} items <p>Deprecated as of 4.0. Use the {@link #menu} config instead. All menu items will be created
         * as {@link Ext.menu.CheckItem CheckItem}s.</p>
         * <p>An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the
         * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
         */
        /**
         * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false).
         * The Button will show its configured {@link #text} if this. config is omitted.
         */
        /**
         * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
         * button's text (only applies when showText = true, defaults to '')
         */
        /**
         * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
         * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead
         * fire the {@link #change} event on active item change.  The changeHandler function will be called with the
         * following argument list: (SplitButton this, Ext.menu.CheckItem item)
         */
        /**
         * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This
         * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the
         * default behavior of changing the button's icon to match the selected item's icon on change.
         */
        /**
         * @property menu
         * @type Menu
         * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
         */

        // private
        getButtonText: function(item) {
            var me = this,
                text = '';

            if (item && me.showText === true) {
                if (me.prependText) {
                    text += me.prependText;
                }
                text += item.text;
                return text;
            }
            return me.text;
        },

        /**
         * Sets the button's active menu item.
         * @param {Ext.menu.CheckItem} item The item to activate
         * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
         */
        setActiveItem: function(item, suppressEvent) {
            var me = this;

            if (!Ext.isObject(item)) {
                item = me.menu.getComponent(item);
            }
            if (item) {
                if (!me.rendered) {
                    me.text = me.getButtonText(item);
                    me.iconCls = item.iconCls;
                } else {
                    me.setText(me.getButtonText(item));
                    me.setIconCls(item.iconCls);
                }
                me.activeItem = item;
                if (!item.checked) {
                    item.setChecked(true, false);
                }
                if (me.forceIcon) {
                    me.setIconCls(me.forceIcon);
                }
                if (!suppressEvent) {
                    me.fireEvent('change', me, item);
                }
            }
        },

        /**
         * Gets the currently active menu item.
         * @return {Ext.menu.CheckItem} The active item
         */
        getActiveItem: function() {
            return this.activeItem;
        },

        // private
        initComponent: function() {
            var me = this,
                checked = 0,
                items;

            me.addEvents(
                /**
                 * @event change
                 * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function
                 * is set on this CycleButton, it will be called instead on active item change and this change event will
                 * not be fired.
                 * @param {Ext.button.Cycle} this
                 * @param {Ext.menu.CheckItem} item The menu item that was selected
                 */
                "change"
            );

            if (me.changeHandler) {
                me.on('change', me.changeHandler, me.scope || me);
                delete me.changeHandler;
            }

            // Allow them to specify a menu config which is a standard Button config.
            // Remove direct use of "items" in 5.0.
            items = (me.menu.items||[]).concat(me.items||[]);
            me.menu = Ext.applyIf({
                cls: Ext.baseCSSPrefix + 'cycle-menu',
                items: []
            }, me.menu);

            // Convert all items to CheckItems
            Ext.each(items, function(item, i) {
                item = Ext.applyIf({
                    group: me.id,
                    itemIndex: i,
                    checkHandler: me.checkHandler,
                    scope: me,
                    checked: item.checked || false
                }, item);
                me.menu.items.push(item);
                if (item.checked) {
                    checked = i;
                }
            });
            me.itemCount = me.menu.items.length;
            me.callParent(arguments);
            me.on('click', me.toggleSelected, me);
            me.setActiveItem(checked, me);

            // If configured with a fixed width, the cycling will center a different child item's text each click. Prevent this.
            if (me.width && me.showText) {
                me.addCls(Ext.baseCSSPrefix + 'cycle-fixed-width');
            }
        },

        // private
        checkHandler: function(item, pressed) {
            if (pressed) {
                this.setActiveItem(item);
            }
        },

        /**
         * This is normally called internally on button click, but can be called externally to advance the button's
         * active item programmatically to the next one in the menu.  If the current item is the last one in the menu
         * the active item will be set to the first item in the menu.
         */
        toggleSelected: function() {
            var me = this,
                m = me.menu,
                checkItem;

            checkItem = me.activeItem.next(':not([disabled])') || m.items.getAt(0);
            checkItem.setChecked(true);
        }
    });