docs/source/Cycle.html

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