+++ /dev/null
-<html>\r
-<head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \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(!Ext.isObject(item)){\r
- item = this.menu.getComponent(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, false);\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 = 0;\r
- Ext.each(this.items, function(item, i){\r
- Ext.apply(item, {\r
- group: item.group || this.id,\r
- itemIndex: i,\r
- checkHandler: this.checkHandler,\r
- scope: this,\r
- checked: item.checked || false\r
- });\r
- this.menu.items.push(item);\r
- if(item.checked){\r
- checked = i;\r
- }\r
- }, this);\r
- Ext.CycleButton.superclass.initComponent.call(this);\r
- this.on('click', this.toggleSelected, this);\r
- this.setActiveItem(checked, true);\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
- var m = this.menu;\r
- m.render();\r
- // layout if we haven't before so the items are active\r
- if(!m.hasLayout){\r
- m.doLayout();\r
- }\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 = m.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