3 <title>The source code</title>
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 <body onload="prettyPrint();">
8 <pre class="prettyprint lang-js">/*!
10 * Copyright(c) 2006-2009 Ext JS, LLC
12 * http://www.extjs.com/license
14 <div id="cls-Ext.SplitButton"></div>/**
\r
15 * @class Ext.SplitButton
\r
16 * @extends Ext.Button
\r
17 * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
\r
18 * click event of the button. Typically this would be used to display a dropdown menu that provides additional
\r
19 * options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage:
\r
21 // display a dropdown menu:
\r
22 new Ext.SplitButton({
\r
23 renderTo: 'button-ct', // the container id
\r
25 handler: optionsHandler, // handle a click on the button itself
\r
26 menu: new Ext.menu.Menu({
\r
28 // these items will render as dropdown menu items when the arrow is clicked:
\r
29 {text: 'Item 1', handler: item1Handler},
\r
30 {text: 'Item 2', handler: item2Handler}
\r
35 // Instead of showing a menu, you provide any type of custom
\r
36 // functionality you want when the dropdown arrow is clicked:
\r
37 new Ext.SplitButton({
\r
38 renderTo: 'button-ct',
\r
40 handler: optionsHandler,
\r
41 arrowHandler: myCustomHandler
\r
44 * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
\r
45 * @cfg {String} arrowTooltip The title attribute of the arrow
\r
47 * Create a new menu button
\r
48 * @param {Object} config The config object
\r
49 * @xtype splitbutton
\r
51 Ext.SplitButton = Ext.extend(Ext.Button, {
\r
53 arrowSelector : 'em',
\r
57 initComponent : function(){
\r
58 Ext.SplitButton.superclass.initComponent.call(this);
\r
61 * Fires when this button's arrow is clicked
\r
62 * @param {MenuButton} this
\r
63 * @param {EventObject} e The click event
\r
65 this.addEvents("arrowclick");
\r
69 onRender : function(){
\r
70 Ext.SplitButton.superclass.onRender.apply(this, arguments);
\r
71 if(this.arrowTooltip){
\r
72 this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
\r
77 * Sets this button's arrow click handler.
\r
78 * @param {Function} handler The function to call when the arrow is clicked
\r
79 * @param {Object} scope (optional) Scope for the function passed above
\r
81 setArrowHandler : function(handler, scope){
\r
82 this.arrowHandler = handler;
\r
86 getMenuClass : function(){
\r
87 return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
\r
90 isClickOnArrow : function(e){
\r
91 return this.arrowAlign != 'bottom' ?
\r
92 e.getPageX() > this.el.child(this.buttonSelector).getRegion().right :
\r
93 e.getPageY() > this.el.child(this.buttonSelector).getRegion().bottom;
\r
97 onClick : function(e, t){
\r
100 if(this.isClickOnArrow(e)){
\r
101 if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
\r
104 this.fireEvent("arrowclick", this, e);
\r
105 if(this.arrowHandler){
\r
106 this.arrowHandler.call(this.scope || this, this, e);
\r
109 if(this.enableToggle){
\r
112 this.fireEvent("click", this, e);
\r
114 this.handler.call(this.scope || this, this, e);
\r
121 isMenuTriggerOver : function(e){
\r
122 return this.menu && e.target.tagName == 'em';
\r
126 isMenuTriggerOut : function(e, internal){
\r
127 return this.menu && e.target.tagName != 'em';
\r
131 Ext.reg('splitbutton', Ext.SplitButton);</pre>