src/widgets/CycleButton.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**\r
   8  * @class Ext.CycleButton\r
   9  * @extends Ext.SplitButton\r
  10  * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically\r
  11  * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's\r
  12  * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the\r
  13  * button displays the dropdown menu just like a normal SplitButton.  Example usage:\r
  14  * <pre><code>\r
  15 var btn = new Ext.CycleButton({\r
  16     showText: true,\r
  17     prependText: 'View as ',\r
  18     items: [{\r
  19         text:'text only',\r
  20         iconCls:'view-text',\r
  21         checked:true\r
  22     },{\r
  23         text:'HTML',\r
  24         iconCls:'view-html'\r
  25     }],\r
  26     changeHandler:function(btn, item){\r
  27         Ext.Msg.alert('Change View', item.text);\r
  28     }\r
  29 });\r
  30 </code></pre>\r
  31  * @constructor\r
  32  * Create a new split button\r
  33  * @param {Object} config The config object\r
  34  * @xtype cycle\r
  35  */\r
  36 Ext.CycleButton = Ext.extend(Ext.SplitButton, {\r
  37     /**\r
  38      * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the\r
  39      * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})\r
  40      */\r
  41     /**\r
  42      * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)\r
  43      */\r
  44     /**\r
  45      * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the\r
  46      * button's text (only applies when showText = true, defaults to '')\r
  47      */\r
  48     /**\r
  49      * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu\r
  50      * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead\r
  51      * fire the {@link #change} event on active item change.  The changeHandler function will be called with the\r
  52      * following argument list: (SplitButton this, Ext.menu.CheckItem item)\r
  53      */\r
  54     /**\r
  55      * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This\r
  56      * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the \r
  57      * default behavior of changing the button's icon to match the selected item's icon on change.\r
  58      */\r
  59     /**\r
  60      * @property menu\r
  61      * @type Menu\r
  62      * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.\r
  63      */\r
  64 \r
  65     // private\r
  66     getItemText : function(item){\r
  67         if(item && this.showText === true){\r
  68             var text = '';\r
  69             if(this.prependText){\r
  70                 text += this.prependText;\r
  71             }\r
  72             text += item.text;\r
  73             return text;\r
  74         }\r
  75         return undefined;\r
  76     },\r
  77 \r
  78     /**\r
  79      * Sets the button's active menu item.\r
  80      * @param {Ext.menu.CheckItem} item The item to activate\r
  81      * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)\r
  82      */\r
  83     setActiveItem : function(item, suppressEvent){\r
  84         if(!Ext.isObject(item)){\r
  85             item = this.menu.getComponent(item);\r
  86         }\r
  87         if(item){\r
  88             if(!this.rendered){\r
  89                 this.text = this.getItemText(item);\r
  90                 this.iconCls = item.iconCls;\r
  91             }else{\r
  92                 var t = this.getItemText(item);\r
  93                 if(t){\r
  94                     this.setText(t);\r
  95                 }\r
  96                 this.setIconClass(item.iconCls);\r
  97             }\r
  98             this.activeItem = item;\r
  99             if(!item.checked){\r
 100                 item.setChecked(true, true);\r
 101             }\r
 102             if(this.forceIcon){\r
 103                 this.setIconClass(this.forceIcon);\r
 104             }\r
 105             if(!suppressEvent){\r
 106                 this.fireEvent('change', this, item);\r
 107             }\r
 108         }\r
 109     },\r
 110 \r
 111     /**\r
 112      * Gets the currently active menu item.\r
 113      * @return {Ext.menu.CheckItem} The active item\r
 114      */\r
 115     getActiveItem : function(){\r
 116         return this.activeItem;\r
 117     },\r
 118 \r
 119     // private\r
 120     initComponent : function(){\r
 121         this.addEvents(\r
 122             /**\r
 123              * @event change\r
 124              * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function\r
 125              * is set on this CycleButton, it will be called instead on active item change and this change event will\r
 126              * not be fired.\r
 127              * @param {Ext.CycleButton} this\r
 128              * @param {Ext.menu.CheckItem} item The menu item that was selected\r
 129              */\r
 130             "change"\r
 131         );\r
 132 \r
 133         if(this.changeHandler){\r
 134             this.on('change', this.changeHandler, this.scope||this);\r
 135             delete this.changeHandler;\r
 136         }\r
 137 \r
 138         this.itemCount = this.items.length;\r
 139 \r
 140         this.menu = {cls:'x-cycle-menu', items:[]};\r
 141         var checked;\r
 142         Ext.each(this.items, function(item, i){\r
 143             Ext.apply(item, {\r
 144                 group: item.group || this.id,\r
 145                 itemIndex: i,\r
 146                 checkHandler: this.checkHandler,\r
 147                 scope: this,\r
 148                 checked: item.checked || false\r
 149             });\r
 150             this.menu.items.push(item);\r
 151             if(item.checked){\r
 152                 checked = item;\r
 153             }\r
 154         }, this);\r
 155         this.setActiveItem(checked, true);\r
 156         Ext.CycleButton.superclass.initComponent.call(this);\r
 157 \r
 158         this.on('click', this.toggleSelected, this);\r
 159     },\r
 160 \r
 161     // private\r
 162     checkHandler : function(item, pressed){\r
 163         if(pressed){\r
 164             this.setActiveItem(item);\r
 165         }\r
 166     },\r
 167 \r
 168     /**\r
 169      * This is normally called internally on button click, but can be called externally to advance the button's\r
 170      * active item programmatically to the next one in the menu.  If the current item is the last one in the menu\r
 171      * the active item will be set to the first item in the menu.\r
 172      */\r
 173     toggleSelected : function(){\r
 174         var m = this.menu;\r
 175         m.render();\r
 176         // layout if we haven't before so the items are active\r
 177         if(!m.hasLayout){\r
 178             m.doLayout();\r
 179         }\r
 180         \r
 181         var nextIdx, checkItem;\r
 182         for (var i = 1; i < this.itemCount; i++) {\r
 183             nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;\r
 184             // check the potential item\r
 185             checkItem = m.items.itemAt(nextIdx);\r
 186             // if its not disabled then check it.\r
 187             if (!checkItem.disabled) {\r
 188                 checkItem.setChecked(true);\r
 189                 break;\r
 190             }\r
 191         }\r
 192     }\r
 193 });\r
 194 Ext.reg('cycle', Ext.CycleButton);