1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /** |
---|
10 | * @class Ext.SplitButton |
---|
11 | * @extends Ext.Button |
---|
12 | * A split button that provides a built-in dropdown arrow that can fire an event separately from the default |
---|
13 | * click event of the button. Typically this would be used to display a dropdown menu that provides additional |
---|
14 | * options to the primary button action, but any custom handler can provide the arrowclick implementation. Example usage: |
---|
15 | * <pre><code> |
---|
16 | // display a dropdown menu: |
---|
17 | new Ext.SplitButton({ |
---|
18 | renderTo: 'button-ct', // the container id |
---|
19 | text: 'Options', |
---|
20 | handler: optionsHandler, // handle a click on the button itself |
---|
21 | menu: new Ext.menu.Menu({ |
---|
22 | items: [ |
---|
23 | // these items will render as dropdown menu items when the arrow is clicked: |
---|
24 | {text: 'Item 1', handler: item1Handler}, |
---|
25 | {text: 'Item 2', handler: item2Handler} |
---|
26 | ] |
---|
27 | }) |
---|
28 | }); |
---|
29 | |
---|
30 | // Instead of showing a menu, you provide any type of custom |
---|
31 | // functionality you want when the dropdown arrow is clicked: |
---|
32 | new Ext.SplitButton({ |
---|
33 | renderTo: 'button-ct', |
---|
34 | text: 'Options', |
---|
35 | handler: optionsHandler, |
---|
36 | arrowHandler: myCustomHandler |
---|
37 | }); |
---|
38 | </code></pre> |
---|
39 | * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event) |
---|
40 | * @cfg {String} arrowTooltip The title attribute of the arrow |
---|
41 | * @constructor |
---|
42 | * Create a new menu button |
---|
43 | * @param {Object} config The config object |
---|
44 | */ |
---|
45 | Ext.SplitButton = Ext.extend(Ext.Button, { |
---|
46 | // private |
---|
47 | arrowSelector : 'button:last', |
---|
48 | |
---|
49 | // private |
---|
50 | initComponent : function(){ |
---|
51 | Ext.SplitButton.superclass.initComponent.call(this); |
---|
52 | /** |
---|
53 | * @event arrowclick |
---|
54 | * Fires when this button's arrow is clicked |
---|
55 | * @param {MenuButton} this |
---|
56 | * @param {EventObject} e The click event |
---|
57 | */ |
---|
58 | this.addEvents("arrowclick"); |
---|
59 | }, |
---|
60 | |
---|
61 | // private |
---|
62 | onRender : function(ct, position){ |
---|
63 | // this is one sweet looking template! |
---|
64 | var tpl = new Ext.Template( |
---|
65 | '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>', |
---|
66 | '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>', |
---|
67 | '<tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><button class="x-btn-text" type="{1}">{0}</button></td></tr>', |
---|
68 | "</tbody></table></td><td>", |
---|
69 | '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>', |
---|
70 | '<tr><td class="x-btn-center"><button class="x-btn-menu-arrow-el" type="button"> </button></td><td class="x-btn-right"><i> </i></td></tr>', |
---|
71 | "</tbody></table></td></tr></table>" |
---|
72 | ); |
---|
73 | var btn, targs = [this.text || ' ', this.type]; |
---|
74 | if(position){ |
---|
75 | btn = tpl.insertBefore(position, targs, true); |
---|
76 | }else{ |
---|
77 | btn = tpl.append(ct, targs, true); |
---|
78 | } |
---|
79 | var btnEl = btn.child(this.buttonSelector); |
---|
80 | |
---|
81 | this.initButtonEl(btn, btnEl); |
---|
82 | this.arrowBtnTable = btn.child("table:last"); |
---|
83 | if(this.arrowTooltip){ |
---|
84 | btn.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip; |
---|
85 | } |
---|
86 | }, |
---|
87 | |
---|
88 | // private |
---|
89 | autoWidth : function(){ |
---|
90 | if(this.el){ |
---|
91 | var tbl = this.el.child("table:first"); |
---|
92 | var tbl2 = this.el.child("table:last"); |
---|
93 | this.el.setWidth("auto"); |
---|
94 | tbl.setWidth("auto"); |
---|
95 | if(Ext.isIE7 && Ext.isStrict){ |
---|
96 | var ib = this.el.child(this.buttonSelector); |
---|
97 | if(ib && ib.getWidth() > 20){ |
---|
98 | ib.clip(); |
---|
99 | ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr')); |
---|
100 | } |
---|
101 | } |
---|
102 | if(this.minWidth){ |
---|
103 | if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){ |
---|
104 | tbl.setWidth(this.minWidth-tbl2.getWidth()); |
---|
105 | } |
---|
106 | } |
---|
107 | this.el.setWidth(tbl.getWidth()+tbl2.getWidth()); |
---|
108 | } |
---|
109 | }, |
---|
110 | |
---|
111 | /** |
---|
112 | * Sets this button's arrow click handler. |
---|
113 | * @param {Function} handler The function to call when the arrow is clicked |
---|
114 | * @param {Object} scope (optional) Scope for the function passed above |
---|
115 | */ |
---|
116 | setArrowHandler : function(handler, scope){ |
---|
117 | this.arrowHandler = handler; |
---|
118 | this.scope = scope; |
---|
119 | }, |
---|
120 | |
---|
121 | // private |
---|
122 | onClick : function(e){ |
---|
123 | e.preventDefault(); |
---|
124 | if(!this.disabled){ |
---|
125 | if(e.getTarget(".x-btn-menu-arrow-wrap")){ |
---|
126 | if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){ |
---|
127 | this.showMenu(); |
---|
128 | } |
---|
129 | this.fireEvent("arrowclick", this, e); |
---|
130 | if(this.arrowHandler){ |
---|
131 | this.arrowHandler.call(this.scope || this, this, e); |
---|
132 | } |
---|
133 | }else{ |
---|
134 | if(this.enableToggle){ |
---|
135 | this.toggle(); |
---|
136 | } |
---|
137 | this.fireEvent("click", this, e); |
---|
138 | if(this.handler){ |
---|
139 | this.handler.call(this.scope || this, this, e); |
---|
140 | } |
---|
141 | } |
---|
142 | } |
---|
143 | }, |
---|
144 | |
---|
145 | // private |
---|
146 | getClickEl : function(e, isUp){ |
---|
147 | if(!isUp){ |
---|
148 | return (this.lastClickEl = e.getTarget("table", 10, true)); |
---|
149 | } |
---|
150 | return this.lastClickEl; |
---|
151 | }, |
---|
152 | |
---|
153 | // private |
---|
154 | onDisable : function(){ |
---|
155 | if(this.el){ |
---|
156 | if(!Ext.isIE6){ |
---|
157 | this.el.addClass("x-item-disabled"); |
---|
158 | } |
---|
159 | this.el.child(this.buttonSelector).dom.disabled = true; |
---|
160 | this.el.child(this.arrowSelector).dom.disabled = true; |
---|
161 | } |
---|
162 | this.disabled = true; |
---|
163 | }, |
---|
164 | |
---|
165 | // private |
---|
166 | onEnable : function(){ |
---|
167 | if(this.el){ |
---|
168 | if(!Ext.isIE6){ |
---|
169 | this.el.removeClass("x-item-disabled"); |
---|
170 | } |
---|
171 | this.el.child(this.buttonSelector).dom.disabled = false; |
---|
172 | this.el.child(this.arrowSelector).dom.disabled = false; |
---|
173 | } |
---|
174 | this.disabled = false; |
---|
175 | }, |
---|
176 | |
---|
177 | // private |
---|
178 | isMenuTriggerOver : function(e){ |
---|
179 | return this.menu && e.within(this.arrowBtnTable) && !e.within(this.arrowBtnTable, true); |
---|
180 | }, |
---|
181 | |
---|
182 | // private |
---|
183 | isMenuTriggerOut : function(e, internal){ |
---|
184 | return this.menu && !e.within(this.arrowBtnTable); |
---|
185 | }, |
---|
186 | |
---|
187 | // private |
---|
188 | onDestroy : function(){ |
---|
189 | Ext.destroy(this.arrowBtnTable); |
---|
190 | Ext.SplitButton.superclass.onDestroy.call(this); |
---|
191 | } |
---|
192 | }); |
---|
193 | |
---|
194 | // backwards compat |
---|
195 | Ext.MenuButton = Ext.SplitButton; |
---|
196 | |
---|
197 | |
---|
198 | Ext.reg('splitbutton', Ext.SplitButton); |
---|