Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / src / button / Split.js

diff --git a/src/button/Split.js b/src/button/Split.js
index feebe42..b365eec 100644 (file)
--- a/src/button/Split.js
+++ b/src/button/Split.js
@@ -13,48 +13,56 @@ If you are unsure which license is appropriate for your use, please contact the
 
 */
 /**
- * @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:
- * <pre><code>
-// 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
-    });
-</code></pre>
- * @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
+ * 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("The button was clicked");
+ *         },
+ *         menu: new Ext.menu.Menu({
+ *             items: [
+ *                 // these will render as dropdown menu items when the arrow is clicked:
+ *                 {text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
+ *                 {text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
+ *             ]
+ *         })
+ *     });
+ *
+ * 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 */
+    
+    /**
+     * @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
+     */
 
     // private
     arrowCls      : 'split',
@@ -65,14 +73,14 @@ Ext.define('Ext.button.Split', {
         this.callParent();
         /**
          * @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("arrowclick");
     },
 
-     /**
+    /**
      * 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
@@ -89,22 +97,14 @@ Ext.define('Ext.button.Split', {
         e.preventDefault();
         if (!me.disabled) {
             if (me.overMenuTrigger) {
-                if (me.menu && !me.menu.isVisible() && !me.ignoreNextClick) {
-                    me.showMenu();
-                }
+                me.maybeShowMenu();
                 me.fireEvent("arrowclick", me, e);
                 if (me.arrowHandler) {
                     me.arrowHandler.call(me.scope || me, me, e);
                 }
             } else {
-                if (me.enableToggle) {
-                    me.toggle();
-                }
-                me.fireEvent("click", me, e);
-                if (me.handler) {
-                    me.handler.call(me.scope || me, me, e);
-                }
-                me.onBlur();
+                me.doToggle();
+                me.fireHandler();
             }
         }
     }