docs/source/Split.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><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'>/**
   2 </span></span></span></span> * @class Ext.button.Split
   3  * @extends Ext.button.Button
   4  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
   5  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
   6  * options to the primary button action, but any custom handler can provide the arrowclick implementation.
   7  * {@img Ext.button.Split/Ext.button.Split.png Ext.button.Split component}
   8  * Example usage:
   9  * &lt;pre&gt;&lt;code&gt;
  10 // display a dropdown menu:
  11     Ext.create('Ext.button.Split', {
  12         renderTo: 'button-ct', // the container id
  13         text: 'Options',
  14         handler: optionsHandler, // handle a click on the button itself
  15         menu: new Ext.menu.Menu({
  16         items: [
  17                 // these items will render as dropdown menu items when the arrow is clicked:
  18                 {text: 'Item 1', handler: item1Handler},
  19                 {text: 'Item 2', handler: item2Handler}
  20         ]
  21         })
  22     });
  23
  24 // Instead of showing a menu, you provide any type of custom
  25 // functionality you want when the dropdown arrow is clicked:
  26     Ext.create('Ext.button.Split', {
  27         renderTo: 'button-ct',
  28         text: 'Options',
  29         handler: optionsHandler,
  30         arrowHandler: myCustomHandler
  31     });
  32 &lt;/code&gt;&lt;/pre&gt;
  33  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
  34  * @cfg {String} arrowTooltip The title attribute of the arrow
  35  * @constructor
  36  * Create a new menu button
  37  * @param {Object} config The config object
  38  * @xtype splitbutton
  39  */
  40
  41 Ext.define('Ext.button.Split', {
  42
  43     /* Begin Definitions */
  44
  45     alias: 'widget.splitbutton',
  46
  47     extend: 'Ext.button.Button',
  48     alternateClassName: 'Ext.SplitButton',
  49
  50     // private
  51     arrowCls      : 'split',
  52     split         : true,
  53
  54     // private
  55     initComponent : function(){
  56         this.callParent();
  57 <span id='Ext-button.Split-event-arrowclick'>        /**
  58 </span>         * @event arrowclick
  59          * Fires when this button's arrow is clicked
  60          * @param {MenuButton} this
  61          * @param {EventObject} e The click event
  62          */
  63         this.addEvents(&quot;arrowclick&quot;);
  64     },
  65
  66 <span id='Ext-button.Split-method-setArrowHandler'>     /**
  67 </span>     * Sets this button's arrow click handler.
  68      * @param {Function} handler The function to call when the arrow is clicked
  69      * @param {Object} scope (optional) Scope for the function passed above
  70      */
  71     setArrowHandler : function(handler, scope){
  72         this.arrowHandler = handler;
  73         this.scope = scope;
  74     },
  75
  76     // private
  77     onClick : function(e, t) {
  78         var me = this;
  79
  80         e.preventDefault();
  81         if (!me.disabled) {
  82             if (me.overMenuTrigger) {
  83                 if (me.menu &amp;&amp; !me.menu.isVisible() &amp;&amp; !me.ignoreNextClick) {
  84                     me.showMenu();
  85                 }
  86                 me.fireEvent(&quot;arrowclick&quot;, me, e);
  87                 if (me.arrowHandler) {
  88                     me.arrowHandler.call(me.scope || me, me, e);
  89                 }
  90             } else {
  91                 if (me.enableToggle) {
  92                     me.toggle();
  93                 }
  94                 me.fireEvent(&quot;click&quot;, me, e);
  95                 if (me.handler) {
  96                     me.handler.call(me.scope || me, me, e);
  97                 }
  98                 me.onBlur();
  99             }
 100         }
 101     }
 102 });</pre></pre></body></html>