Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>