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