Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Split.html
index b1f2259..d5b021a 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>
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-button-Split-method-constructor'><span id='Ext-button-Split-cfg-arrowTooltip'><span id='Ext-button-Split-cfg-arrowHandler'><span id='Ext-button-Split'>/**
-</span></span></span></span> * @class Ext.button.Split
- * @extends Ext.button.Button
- * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
- * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
- * options to the primary button action, but any custom handler can provide the arrowclick implementation.  
- * {@img Ext.button.Split/Ext.button.Split.png Ext.button.Split component}
- * Example usage:
- * &lt;pre&gt;&lt;code&gt;
-// display a dropdown menu:
-    Ext.create('Ext.button.Split', {
-        renderTo: 'button-ct', // the container id
-        text: 'Options',
-        handler: optionsHandler, // handle a click on the button itself
-        menu: new Ext.menu.Menu({
-        items: [
-                // these items will render as dropdown menu items when the arrow is clicked:
-                {text: 'Item 1', handler: item1Handler},
-                {text: 'Item 2', handler: item2Handler}
-        ]
-        })
-    });
-
-// Instead of showing a menu, you provide any type of custom
-// functionality you want when the dropdown arrow is clicked:
-    Ext.create('Ext.button.Split', {
-        renderTo: 'button-ct',
-        text: 'Options',
-        handler: optionsHandler,
-        arrowHandler: myCustomHandler
-    });
-&lt;/code&gt;&lt;/pre&gt;
- * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
- * @cfg {String} arrowTooltip The title attribute of the arrow
- * @constructor
- * Create a new menu button
- * @param {Object} config The config object
- * @xtype splitbutton
+  <pre class="prettyprint lang-js"><span id='Ext-button-Split'>/**
+</span> * A split button that provides a built-in dropdown arrow that can fire an event separately from the default click event
+ * of the button. Typically this would be used to display a dropdown menu that provides additional options to the
+ * primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
+ *
+ *     @example
+ *     // display a dropdown menu:
+ *     Ext.create('Ext.button.Split', {
+ *         renderTo: Ext.getBody(),
+ *         text: 'Options',
+ *         // handle a click on the button itself
+ *         handler: function() {
+ *             alert(&quot;The button was clicked&quot;);
+ *         },
+ *         menu: new Ext.menu.Menu({
+ *             items: [
+ *                 // these will render as dropdown menu items when the arrow is clicked:
+ *                 {text: 'Item 1', handler: function(){ alert(&quot;Item 1 clicked&quot;); }},
+ *                 {text: 'Item 2', handler: function(){ alert(&quot;Item 2 clicked&quot;); }}
+ *             ]
+ *         })
+ *     });
+ *
+ * Instead of showing a menu, you can provide any type of custom functionality you want when the dropdown
+ * arrow is clicked:
+ *
+ *     Ext.create('Ext.button.Split', {
+ *         renderTo: 'button-ct',
+ *         text: 'Options',
+ *         handler: optionsHandler,
+ *         arrowHandler: myCustomHandler
+ *     });
+ *
  */
-
 Ext.define('Ext.button.Split', {
 
     /* Begin Definitions */
-
     alias: 'widget.splitbutton',
 
     extend: 'Ext.button.Button',
     alternateClassName: 'Ext.SplitButton',
+    /* End Definitions */
+    
+<span id='Ext-button-Split-cfg-arrowHandler'>    /**
+</span>     * @cfg {Function} arrowHandler
+     * A function called when the arrow button is clicked (can be used instead of click event)
+     */
+<span id='Ext-button-Split-cfg-arrowTooltip'>    /**
+</span>     * @cfg {String} arrowTooltip
+     * The title attribute of the arrow
+     */
 
     // private
     arrowCls      : 'split',
@@ -73,14 +76,14 @@ Ext.define('Ext.button.Split', {
         this.callParent();
 <span id='Ext-button-Split-event-arrowclick'>        /**
 </span>         * @event arrowclick
-         * Fires when this button's arrow is clicked
-         * @param {MenuButton} this
-         * @param {EventObject} e The click event
+         * Fires when this button's arrow is clicked.
+         * @param {Ext.button.Split} this
+         * @param {Event} e The click event
          */
         this.addEvents(&quot;arrowclick&quot;);
     },
 
-<span id='Ext-button-Split-method-setArrowHandler'>     /**
+<span id='Ext-button-Split-method-setArrowHandler'>    /**
 </span>     * Sets this button's arrow click handler.
      * @param {Function} handler The function to call when the arrow is clicked
      * @param {Object} scope (optional) Scope for the function passed above
@@ -97,22 +100,14 @@ Ext.define('Ext.button.Split', {
         e.preventDefault();
         if (!me.disabled) {
             if (me.overMenuTrigger) {
-                if (me.menu &amp;&amp; !me.menu.isVisible() &amp;&amp; !me.ignoreNextClick) {
-                    me.showMenu();
-                }
+                me.maybeShowMenu();
                 me.fireEvent(&quot;arrowclick&quot;, me, e);
                 if (me.arrowHandler) {
                     me.arrowHandler.call(me.scope || me, me, e);
                 }
             } else {
-                if (me.enableToggle) {
-                    me.toggle();
-                }
-                me.fireEvent(&quot;click&quot;, me, e);
-                if (me.handler) {
-                    me.handler.call(me.scope || me, me, e);
-                }
-                me.onBlur();
+                me.doToggle();
+                me.fireHandler();
             }
         }
     }