--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js"><div id="cls-Ext.CycleButton"></div>/**\r
+ * @class Ext.CycleButton\r
+ * @extends Ext.SplitButton\r
+ * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements. The button automatically\r
+ * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's\r
+ * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the\r
+ * button displays the dropdown menu just like a normal SplitButton. Example usage:\r
+ * <pre><code>\r
+var btn = new Ext.CycleButton({\r
+ showText: true,\r
+ prependText: 'View as ',\r
+ items: [{\r
+ text:'text only',\r
+ iconCls:'view-text',\r
+ checked:true\r
+ },{\r
+ text:'HTML',\r
+ iconCls:'view-html'\r
+ }],\r
+ changeHandler:function(btn, item){\r
+ Ext.Msg.alert('Change View', item.text);\r
+ }\r
+});\r
+</code></pre>\r
+ * @constructor\r
+ * Create a new split button\r
+ * @param {Object} config The config object\r
+ * @xtype cycle\r
+ */\r
+Ext.CycleButton = Ext.extend(Ext.SplitButton, {\r
+ <div id="cfg-Ext.CycleButton-items"></div>/**\r
+ * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the\r
+ * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})\r
+ */\r
+ <div id="cfg-Ext.CycleButton-showText"></div>/**\r
+ * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)\r
+ */\r
+ <div id="cfg-Ext.CycleButton-prependText"></div>/**\r
+ * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the\r
+ * button's text (only applies when showText = true, defaults to '')\r
+ */\r
+ <div id="cfg-Ext.CycleButton-changeHandler"></div>/**\r
+ * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu\r
+ * item in the button's menu has changed. If this callback is not supplied, the SplitButton will instead\r
+ * fire the {@link #change} event on active item change. The changeHandler function will be called with the\r
+ * following argument list: (SplitButton this, Ext.menu.CheckItem item)\r
+ */\r
+ <div id="cfg-Ext.CycleButton-forceIcon"></div>/**\r
+ * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button. This\r
+ * icon will always be displayed regardless of which item is selected in the dropdown list. This overrides the \r
+ * default behavior of changing the button's icon to match the selected item's icon on change.\r
+ */\r
+ <div id="prop-Ext.CycleButton-menu"></div>/**\r
+ * @property menu\r
+ * @type Menu\r
+ * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.\r
+ */\r
+\r
+ // private\r
+ getItemText : function(item){\r
+ if(item && this.showText === true){\r
+ var text = '';\r
+ if(this.prependText){\r
+ text += this.prependText;\r
+ }\r
+ text += item.text;\r
+ return text;\r
+ }\r
+ return undefined;\r
+ },\r
+\r
+ <div id="method-Ext.CycleButton-setActiveItem"></div>/**\r
+ * Sets the button's active menu item.\r
+ * @param {Ext.menu.CheckItem} item The item to activate\r
+ * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)\r
+ */\r
+ setActiveItem : function(item, suppressEvent){\r
+ if(typeof item != 'object'){\r
+ item = this.menu.items.get(item);\r
+ }\r
+ if(item){\r
+ if(!this.rendered){\r
+ this.text = this.getItemText(item);\r
+ this.iconCls = item.iconCls;\r
+ }else{\r
+ var t = this.getItemText(item);\r
+ if(t){\r
+ this.setText(t);\r
+ }\r
+ this.setIconClass(item.iconCls);\r
+ }\r
+ this.activeItem = item;\r
+ if(!item.checked){\r
+ item.setChecked(true, true);\r
+ }\r
+ if(this.forceIcon){\r
+ this.setIconClass(this.forceIcon);\r
+ }\r
+ if(!suppressEvent){\r
+ this.fireEvent('change', this, item);\r
+ }\r
+ }\r
+ },\r
+\r
+ <div id="method-Ext.CycleButton-getActiveItem"></div>/**\r
+ * Gets the currently active menu item.\r
+ * @return {Ext.menu.CheckItem} The active item\r
+ */\r
+ getActiveItem : function(){\r
+ return this.activeItem;\r
+ },\r
+\r
+ // private\r
+ initComponent : function(){\r
+ this.addEvents(\r
+ <div id="event-Ext.CycleButton-change"></div>/**\r
+ * @event change\r
+ * Fires after the button's active menu item has changed. Note that if a {@link #changeHandler} function\r
+ * is set on this CycleButton, it will be called instead on active item change and this change event will\r
+ * not be fired.\r
+ * @param {Ext.CycleButton} this\r
+ * @param {Ext.menu.CheckItem} item The menu item that was selected\r
+ */\r
+ "change"\r
+ );\r
+\r
+ if(this.changeHandler){\r
+ this.on('change', this.changeHandler, this.scope||this);\r
+ delete this.changeHandler;\r
+ }\r
+\r
+ this.itemCount = this.items.length;\r
+\r
+ this.menu = {cls:'x-cycle-menu', items:[]};\r
+ var checked;\r
+ for(var i = 0, len = this.itemCount; i < len; i++){\r
+ var item = this.items[i];\r
+ item.group = item.group || this.id;\r
+ item.itemIndex = i;\r
+ item.checkHandler = this.checkHandler;\r
+ item.scope = this;\r
+ item.checked = item.checked || false;\r
+ this.menu.items.push(item);\r
+ if(item.checked){\r
+ checked = item;\r
+ }\r
+ }\r
+ this.setActiveItem(checked, true);\r
+ Ext.CycleButton.superclass.initComponent.call(this);\r
+\r
+ this.on('click', this.toggleSelected, this);\r
+ },\r
+\r
+ // private\r
+ checkHandler : function(item, pressed){\r
+ if(pressed){\r
+ this.setActiveItem(item);\r
+ }\r
+ },\r
+\r
+ <div id="method-Ext.CycleButton-toggleSelected"></div>/**\r
+ * This is normally called internally on button click, but can be called externally to advance the button's\r
+ * active item programmatically to the next one in the menu. If the current item is the last one in the menu\r
+ * the active item will be set to the first item in the menu.\r
+ */\r
+ toggleSelected : function(){\r
+ this.menu.render();\r
+ \r
+ var nextIdx, checkItem;\r
+ for (var i = 1; i < this.itemCount; i++) {\r
+ nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;\r
+ // check the potential item\r
+ checkItem = this.menu.items.itemAt(nextIdx);\r
+ // if its not disabled then check it.\r
+ if (!checkItem.disabled) {\r
+ checkItem.setChecked(true);\r
+ break;\r
+ }\r
+ }\r
+ }\r
+});\r
+Ext.reg('cycle', Ext.CycleButton);</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff