docs/source/SplitButton.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="cls-Ext.SplitButton"></div>/**
  16  * @class Ext.SplitButton
  17  * @extends Ext.Button
  18  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
  19  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
  20  * options to the primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
  21  * <pre><code>
  22 // display a dropdown menu:
  23 new Ext.SplitButton({
  24         renderTo: 'button-ct', // the container id
  25         text: 'Options',
  26         handler: optionsHandler, // handle a click on the button itself
  27         menu: new Ext.menu.Menu({
  28         items: [
  29                 // these items will render as dropdown menu items when the arrow is clicked:
  30                 {text: 'Item 1', handler: item1Handler},
  31                 {text: 'Item 2', handler: item2Handler}
  32         ]
  33         })
  34 });
  35
  36 // Instead of showing a menu, you provide any type of custom
  37 // functionality you want when the dropdown arrow is clicked:
  38 new Ext.SplitButton({
  39         renderTo: 'button-ct',
  40         text: 'Options',
  41         handler: optionsHandler,
  42         arrowHandler: myCustomHandler
  43 });
  44 </code></pre>
  45  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
  46  * @cfg {String} arrowTooltip The title attribute of the arrow
  47  * @constructor
  48  * Create a new menu button
  49  * @param {Object} config The config object
  50  * @xtype splitbutton
  51  */
  52 Ext.SplitButton = Ext.extend(Ext.Button, {
  53         // private
  54     arrowSelector : 'em',
  55     split: true,
  56
  57     // private
  58     initComponent : function(){
  59         Ext.SplitButton.superclass.initComponent.call(this);
  60         /**
  61          * @event arrowclick
  62          * Fires when this button's arrow is clicked
  63          * @param {MenuButton} this
  64          * @param {EventObject} e The click event
  65          */
  66         this.addEvents("arrowclick");
  67     },
  68
  69     // private
  70     onRender : function(){
  71         Ext.SplitButton.superclass.onRender.apply(this, arguments);
  72         if(this.arrowTooltip){
  73             this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
  74         }
  75     },
  76
  77     /**
  78      * Sets this button's arrow click handler.
  79      * @param {Function} handler The function to call when the arrow is clicked
  80      * @param {Object} scope (optional) Scope for the function passed above
  81      */
  82     setArrowHandler : function(handler, scope){
  83         this.arrowHandler = handler;
  84         this.scope = scope;
  85     },
  86
  87     getMenuClass : function(){
  88         return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
  89     },
  90
  91     isClickOnArrow : function(e){
  92         if (this.arrowAlign != 'bottom') {
  93             var visBtn = this.el.child('em.x-btn-split');
  94             var right = visBtn.getRegion().right - visBtn.getPadding('r');
  95             return e.getPageX() > right;
  96         } else {
  97             return e.getPageY() > this.btnEl.getRegion().bottom;
  98         }
  99     },
 100
 101     // private
 102     onClick : function(e, t){
 103         e.preventDefault();
 104         if(!this.disabled){
 105             if(this.isClickOnArrow(e)){
 106                 if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
 107                     this.showMenu();
 108                 }
 109                 this.fireEvent("arrowclick", this, e);
 110                 if(this.arrowHandler){
 111                     this.arrowHandler.call(this.scope || this, this, e);
 112                 }
 113             }else{
 114                 this.doToggle();
 115                 this.fireEvent("click", this, e);
 116                 if(this.handler){
 117                     this.handler.call(this.scope || this, this, e);
 118                 }
 119             }
 120         }
 121     },
 122
 123     // private
 124     isMenuTriggerOver : function(e){
 125         return this.menu && e.target.tagName == this.arrowSelector;
 126     },
 127
 128     // private
 129     isMenuTriggerOut : function(e, internal){
 130         return this.menu && e.target.tagName != this.arrowSelector;
 131     }
 132 });
 133
 134 Ext.reg('splitbutton', Ext.SplitButton);</pre>
 135 </body>
 136 </html>