docs/source/Cycle.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-button.Cycle-method-constructor'><span id='Ext-button.Cycle'>/**
   2 </span></span> * @class Ext.button.Cycle
   3  * @extends Ext.button.Split
   4  * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
   5  * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
   6  * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
   7  * button displays the dropdown menu just like a normal SplitButton.
   8  * {@img Ext.button.Cycle/Ext.button.Cycle.png Ext.button.Cycle component}
   9  * Example usage:
  10  * &lt;pre&gt;&lt;code&gt;
  11 Ext.create('Ext.button.Cycle', {
  12     showText: true,
  13     prependText: 'View as ',
  14     renderTo: Ext.getBody(),
  15     menu: {
  16         id: 'view-type-menu',
  17         items: [{
  18             text:'text only',
  19             iconCls:'view-text',
  20             checked:true
  21         },{
  22             text:'HTML',
  23             iconCls:'view-html'
  24         }]
  25     },
  26     changeHandler:function(cycleBtn, activeItem){
  27         Ext.Msg.alert('Change View', activeItem.text);
  28     }
  29 });
  30 &lt;/code&gt;&lt;/pre&gt;
  31  * @constructor
  32  * Create a new split button
  33  * @param {Object} config The config object
  34  * @xtype cycle
  35  */
  36
  37 Ext.define('Ext.button.Cycle', {
  38
  39     /* Begin Definitions */
  40
  41     alias: 'widget.cycle',
  42
  43     extend: 'Ext.button.Split',
  44     alternateClassName: 'Ext.CycleButton',
  45
  46     /* End Definitions */
  47
  48 <span id='Ext-button.Cycle-cfg-items'>    /**
  49 </span>     * @cfg {Array} items &lt;p&gt;Deprecated as of 4.0. Use the {@link #menu} config instead. All menu items will be created
  50      * as {@link Ext.menu.CheckItem CheckItem}s.&lt;/p&gt;
  51      * &lt;p&gt;An array of {@link Ext.menu.CheckItem} &lt;b&gt;config&lt;/b&gt; objects to be used when creating the
  52      * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
  53      */
  54 <span id='Ext-button.Cycle-cfg-showText'>    /**
  55 </span>     * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false).
  56      * The Button will show its configured {@link #text} if this. config is omitted.
  57      */
  58 <span id='Ext-button.Cycle-cfg-prependText'>    /**
  59 </span>     * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
  60      * button's text (only applies when showText = true, defaults to '')
  61      */
  62 <span id='Ext-button.Cycle-cfg-changeHandler'>    /**
  63 </span>     * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
  64      * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead
  65      * fire the {@link #change} event on active item change.  The changeHandler function will be called with the
  66      * following argument list: (SplitButton this, Ext.menu.CheckItem item)
  67      */
  68 <span id='Ext-button.Cycle-cfg-forceIcon'>    /**
  69 </span>     * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This
  70      * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the
  71      * default behavior of changing the button's icon to match the selected item's icon on change.
  72      */
  73 <span id='Ext-button.Cycle-property-menu'>    /**
  74 </span>     * @property menu
  75      * @type Menu
  76      * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
  77      */
  78
  79     // private
  80     getButtonText: function(item) {
  81         var me = this,
  82             text = '';
  83
  84         if (item &amp;&amp; me.showText === true) {
  85             if (me.prependText) {
  86                 text += me.prependText;
  87             }
  88             text += item.text;
  89             return text;
  90         }
  91         return me.text;
  92     },
  93
  94 <span id='Ext-button.Cycle-method-setActiveItem'>    /**
  95 </span>     * Sets the button's active menu item.
  96      * @param {Ext.menu.CheckItem} item The item to activate
  97      * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
  98      */
  99     setActiveItem: function(item, suppressEvent) {
 100         var me = this;
 101
 102         if (!Ext.isObject(item)) {
 103             item = me.menu.getComponent(item);
 104         }
 105         if (item) {
 106             if (!me.rendered) {
 107                 me.text = me.getButtonText(item);
 108                 me.iconCls = item.iconCls;
 109             } else {
 110                 me.setText(me.getButtonText(item));
 111                 me.setIconCls(item.iconCls);
 112             }
 113             me.activeItem = item;
 114             if (!item.checked) {
 115                 item.setChecked(true, false);
 116             }
 117             if (me.forceIcon) {
 118                 me.setIconCls(me.forceIcon);
 119             }
 120             if (!suppressEvent) {
 121                 me.fireEvent('change', me, item);
 122             }
 123         }
 124     },
 125
 126 <span id='Ext-button.Cycle-method-getActiveItem'>    /**
 127 </span>     * Gets the currently active menu item.
 128      * @return {Ext.menu.CheckItem} The active item
 129      */
 130     getActiveItem: function() {
 131         return this.activeItem;
 132     },
 133
 134     // private
 135     initComponent: function() {
 136         var me = this,
 137             checked = 0,
 138             items;
 139
 140         me.addEvents(
 141 <span id='Ext-button.Cycle-event-change'>            /**
 142 </span>             * @event change
 143              * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function
 144              * is set on this CycleButton, it will be called instead on active item change and this change event will
 145              * not be fired.
 146              * @param {Ext.button.Cycle} this
 147              * @param {Ext.menu.CheckItem} item The menu item that was selected
 148              */
 149             &quot;change&quot;
 150         );
 151
 152         if (me.changeHandler) {
 153             me.on('change', me.changeHandler, me.scope || me);
 154             delete me.changeHandler;
 155         }
 156
 157         // Allow them to specify a menu config which is a standard Button config.
 158         // Remove direct use of &quot;items&quot; in 5.0.
 159         items = (me.menu.items||[]).concat(me.items||[]);
 160         me.menu = Ext.applyIf({
 161             cls: Ext.baseCSSPrefix + 'cycle-menu',
 162             items: []
 163         }, me.menu);
 164
 165         // Convert all items to CheckItems
 166         Ext.each(items, function(item, i) {
 167             item = Ext.applyIf({
 168                 group: me.id,
 169                 itemIndex: i,
 170                 checkHandler: me.checkHandler,
 171                 scope: me,
 172                 checked: item.checked || false
 173             }, item);
 174             me.menu.items.push(item);
 175             if (item.checked) {
 176                 checked = i;
 177             }
 178         });
 179         me.itemCount = me.menu.items.length;
 180         me.callParent(arguments);
 181         me.on('click', me.toggleSelected, me);
 182         me.setActiveItem(checked, me);
 183
 184         // If configured with a fixed width, the cycling will center a different child item's text each click. Prevent this.
 185         if (me.width &amp;&amp; me.showText) {
 186             me.addCls(Ext.baseCSSPrefix + 'cycle-fixed-width');
 187         }
 188     },
 189
 190     // private
 191     checkHandler: function(item, pressed) {
 192         if (pressed) {
 193             this.setActiveItem(item);
 194         }
 195     },
 196
 197 <span id='Ext-button.Cycle-method-toggleSelected'>    /**
 198 </span>     * This is normally called internally on button click, but can be called externally to advance the button's
 199      * active item programmatically to the next one in the menu.  If the current item is the last one in the menu
 200      * the active item will be set to the first item in the menu.
 201      */
 202     toggleSelected: function() {
 203         var me = this,
 204             m = me.menu,
 205             checkItem;
 206
 207         checkItem = me.activeItem.next(':not([disabled])') || m.items.getAt(0);
 208         checkItem.setChecked(true);
 209     }
 210 });</pre></pre></body></html>