3 <title>The source code</title>
\r
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js"><div id="cls-Ext.SplitButton"></div>/**
\r
9 * @class Ext.SplitButton
\r
10 * @extends Ext.Button
\r
11 * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
\r
12 * click event of the button. Typically this would be used to display a dropdown menu that provides additional
\r
13 * options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage:
\r
15 // display a dropdown menu:
\r
16 new Ext.SplitButton({
\r
17 renderTo: 'button-ct', // the container id
\r
19 handler: optionsHandler, // handle a click on the button itself
\r
20 menu: new Ext.menu.Menu({
\r
22 // these items will render as dropdown menu items when the arrow is clicked:
\r
23 {text: 'Item 1', handler: item1Handler},
\r
24 {text: 'Item 2', handler: item2Handler}
\r
29 // Instead of showing a menu, you provide any type of custom
\r
30 // functionality you want when the dropdown arrow is clicked:
\r
31 new Ext.SplitButton({
\r
32 renderTo: 'button-ct',
\r
34 handler: optionsHandler,
\r
35 arrowHandler: myCustomHandler
\r
38 * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
\r
39 * @cfg {String} arrowTooltip The title attribute of the arrow
\r
41 * Create a new menu button
\r
42 * @param {Object} config The config object
\r
43 * @xtype splitbutton
\r
45 Ext.SplitButton = Ext.extend(Ext.Button, {
\r
47 arrowSelector : 'em',
\r
51 initComponent : function(){
\r
52 Ext.SplitButton.superclass.initComponent.call(this);
\r
55 * Fires when this button's arrow is clicked
\r
56 * @param {MenuButton} this
\r
57 * @param {EventObject} e The click event
\r
59 this.addEvents("arrowclick");
\r
63 onRender : function(){
\r
64 Ext.SplitButton.superclass.onRender.apply(this, arguments);
\r
65 if(this.arrowTooltip){
\r
66 this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
\r
71 * Sets this button's arrow click handler.
\r
72 * @param {Function} handler The function to call when the arrow is clicked
\r
73 * @param {Object} scope (optional) Scope for the function passed above
\r
75 setArrowHandler : function(handler, scope){
\r
76 this.arrowHandler = handler;
\r
80 getMenuClass : function(){
\r
81 return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
\r
84 isClickOnArrow : function(e){
\r
85 return this.arrowAlign != 'bottom' ?
\r
86 e.getPageX() > this.el.child(this.buttonSelector).getRegion().right :
\r
87 e.getPageY() > this.el.child(this.buttonSelector).getRegion().bottom;
\r
91 onClick : function(e, t){
\r
94 if(this.isClickOnArrow(e)){
\r
95 if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
\r
98 this.fireEvent("arrowclick", this, e);
\r
99 if(this.arrowHandler){
\r
100 this.arrowHandler.call(this.scope || this, this, e);
\r
103 if(this.enableToggle){
\r
106 this.fireEvent("click", this, e);
\r
108 this.handler.call(this.scope || this, this, e);
\r
115 isMenuTriggerOver : function(e){
\r
116 return this.menu && e.target.tagName == 'em';
\r
120 isMenuTriggerOut : function(e, internal){
\r
121 return this.menu && e.target.tagName != 'em';
\r
125 Ext.reg('splitbutton', Ext.SplitButton);</pre>
\r