docs/source/CycleButton.html

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