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