4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.SplitButton
15 * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
16 * click event of the button. Typically this would be used to display a dropdown menu that provides additional
17 * options to the primary button action, but any custom handler can provide the arrowclick implementation.
18 * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
19 * @cfg {String} arrowTooltip The title attribute of the arrow
21 * Create a new menu button
22 * @param {String/HTMLElement/Element} renderTo The element to append the button to
23 * @param {Object} config The config object
25 Roo.SplitButton = function(renderTo, config){
26 Roo.SplitButton.superclass.constructor.call(this, renderTo, config);
29 * Fires when this button's arrow is clicked
30 * @param {SplitButton} this
31 * @param {EventObject} e The click event
33 this.addEvents({"arrowclick":true});
36 Roo.extend(Roo.SplitButton, Roo.Button, {
37 render : function(renderTo){
38 // this is one sweet looking template!
39 var tpl = new Roo.Template(
40 '<table cellspacing="0" class="x-btn-menu-wrap x-btn"><tr><td>',
41 '<table cellspacing="0" class="x-btn-wrap x-btn-menu-text-wrap"><tbody>',
42 '<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>',
43 "</tbody></table></td><td>",
44 '<table cellspacing="0" class="x-btn-wrap x-btn-menu-arrow-wrap"><tbody>',
45 '<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>',
46 "</tbody></table></td></tr></table>"
48 var btn = tpl.append(renderTo, [this.text, this.type], true);
49 var btnEl = btn.child("button");
51 btn.addClass(this.cls);
54 btnEl.setStyle('background-image', 'url(' +this.icon +')');
57 btnEl.addClass(this.iconCls);
59 btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
63 if(this.handleMouseEvents){
64 btn.on("mouseover", this.onMouseOver, this);
65 btn.on("mouseout", this.onMouseOut, this);
66 btn.on("mousedown", this.onMouseDown, this);
67 btn.on("mouseup", this.onMouseUp, this);
69 btn.on(this.clickEvent, this.onClick, this);
71 if(typeof this.tooltip == 'object'){
72 Roo.QuickTips.tips(Roo.apply({
76 btnEl.dom[this.tooltipType] = this.tooltip;
79 if(this.arrowTooltip){
80 btn.child("button:nth(2)").dom[this.tooltipType] = this.arrowTooltip;
89 this.el.addClass("x-btn-pressed");
91 if(Roo.isIE && !Roo.isIE7){
92 this.autoWidth.defer(1, this);
97 this.menu.on("show", this.onMenuShow, this);
98 this.menu.on("hide", this.onMenuHide, this);
100 this.fireEvent('render', this);
104 autoWidth : function(){
106 var tbl = this.el.child("table:first");
107 var tbl2 = this.el.child("table:last");
108 this.el.setWidth("auto");
109 tbl.setWidth("auto");
110 if(Roo.isIE7 && Roo.isStrict){
111 var ib = this.el.child('button:first');
112 if(ib && ib.getWidth() > 20){
114 ib.setWidth(Roo.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
119 this.el.beginMeasure();
121 if((tbl.getWidth()+tbl2.getWidth()) < this.minWidth){
122 tbl.setWidth(this.minWidth-tbl2.getWidth());
125 this.el.endMeasure();
128 this.el.setWidth(tbl.getWidth()+tbl2.getWidth());
132 * Sets this button's click handler
133 * @param {Function} handler The function to call when the button is clicked
134 * @param {Object} scope (optional) Scope for the function passed above
136 setHandler : function(handler, scope){
137 this.handler = handler;
142 * Sets this button's arrow click handler
143 * @param {Function} handler The function to call when the arrow is clicked
144 * @param {Object} scope (optional) Scope for the function passed above
146 setArrowHandler : function(handler, scope){
147 this.arrowHandler = handler;
156 this.el.child("button:first").focus();
161 onClick : function(e){
164 if(e.getTarget(".x-btn-menu-arrow-wrap")){
165 if(this.menu && !this.menu.isVisible()){
166 this.menu.show(this.el, this.menuAlign);
168 this.fireEvent("arrowclick", this, e);
169 if(this.arrowHandler){
170 this.arrowHandler.call(this.scope || this, this, e);
173 this.fireEvent("click", this, e);
175 this.handler.call(this.scope || this, this, e);
181 onMouseDown : function(e){
183 Roo.fly(e.getTarget("table")).addClass("x-btn-click");
187 onMouseUp : function(e){
188 Roo.fly(e.getTarget("table")).removeClass("x-btn-click");
194 Roo.MenuButton = Roo.SplitButton;