Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Cycle.html
index 216e8fc..68e7bc4 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
 </head>
 <body onload="prettyPrint(); highlight();">
   <pre class="prettyprint lang-js"><span id='Ext-button-Cycle'>/**
-</span> * @class Ext.button.Cycle
- * @extends Ext.button.Split
- * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
+</span> * 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.  
- * {@img Ext.button.Cycle/Ext.button.Cycle.png Ext.button.Cycle component}
- * Example usage:
- * &lt;pre&gt;&lt;code&gt;
-Ext.create('Ext.button.Cycle', {
-    showText: true,
-    prependText: 'View as ',
-    renderTo: Ext.getBody(),
-    menu: {
-        id: 'view-type-menu',
-        items: [{
-            text:'text only',
-            iconCls:'view-text',
-            checked:true
-        },{
-            text:'HTML',
-            iconCls:'view-html'
-        }]
-    },
-    changeHandler:function(cycleBtn, activeItem){
-        Ext.Msg.alert('Change View', activeItem.text);
-    }
-});
-&lt;/code&gt;&lt;/pre&gt;
+ * button displays the dropdown menu just like a normal SplitButton.  Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.button.Cycle', {
+ *         showText: true,
+ *         prependText: 'View as ',
+ *         renderTo: Ext.getBody(),
+ *         menu: {
+ *             id: 'view-type-menu',
+ *             items: [{
+ *                 text: 'text only',
+ *                 iconCls: 'view-text',
+ *                 checked: true
+ *             },{
+ *                 text: 'HTML',
+ *                 iconCls: 'view-html'
+ *             }]
+ *         },
+ *         changeHandler: function(cycleBtn, activeItem) {
+ *             Ext.Msg.alert('Change View', activeItem.text);
+ *         }
+ *     });
  */
 Ext.define('Ext.button.Cycle', {
 
@@ -58,34 +54,40 @@ Ext.define('Ext.button.Cycle', {
     /* End Definitions */
 
 <span id='Ext-button-Cycle-cfg-items'>    /**
-</span>     * @cfg {Array} items &lt;p&gt;Deprecated as of 4.0. Use the {@link #menu} config instead. All menu items will be created
-     * as {@link Ext.menu.CheckItem CheckItem}s.&lt;/p&gt;
-     * &lt;p&gt;An array of {@link Ext.menu.CheckItem} &lt;b&gt;config&lt;/b&gt; objects to be used when creating the
-     * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
+</span>     * @cfg {Object[]} items
+     * An array of {@link Ext.menu.CheckItem} **config** objects to be used when creating the button's menu items (e.g.,
+     * `{text:'Foo', iconCls:'foo-icon'}`)
+     * 
+     * @deprecated 4.0 Use the {@link #menu} config instead. All menu items will be created as
+     * {@link Ext.menu.CheckItem CheckItems}.
      */
 <span id='Ext-button-Cycle-cfg-showText'>    /**
-</span>     * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false).
-     * The Button will show its configured {@link #text} if this. config is omitted.
+</span>     * @cfg {Boolean} [showText=false]
+     * True to display the active item's text as the button text. The Button will show its
+     * configured {@link #text} if this config is omitted.
      */
 <span id='Ext-button-Cycle-cfg-prependText'>    /**
-</span>     * @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 '')
+</span>     * @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).
      */
 <span id='Ext-button-Cycle-cfg-changeHandler'>    /**
-</span>     * @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)
+</span>     * @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)
      */
 <span id='Ext-button-Cycle-cfg-forceIcon'>    /**
-</span>     * @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.
+</span>     * @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.
      */
 <span id='Ext-button-Cycle-property-menu'>    /**
-</span>     * @property menu
-     * @type Menu
-     * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
+</span>     * @property {Ext.menu.Menu} menu
+     * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the
+     * available choices.
      */
 
     // private
@@ -106,7 +108,7 @@ Ext.define('Ext.button.Cycle', {
 <span id='Ext-button-Cycle-method-setActiveItem'>    /**
 </span>     * 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)
+     * @param {Boolean} [suppressEvent=false] True to prevent the button's change event from firing.
      */
     setActiveItem: function(item, suppressEvent) {
         var me = this;
@@ -152,9 +154,9 @@ Ext.define('Ext.button.Cycle', {
         me.addEvents(
 <span id='Ext-button-Cycle-event-change'>            /**
 </span>             * @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.
+             * 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.button.Cycle} this
              * @param {Ext.menu.CheckItem} item The menu item that was selected
              */
@@ -207,9 +209,9 @@ Ext.define('Ext.button.Cycle', {
     },
 
 <span id='Ext-button-Cycle-method-toggleSelected'>    /**
-</span>     * 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.
+</span>     * 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 me = this,