3
* Copyright(c) 2006-2008, Ext JS, LLC.
6
* http://extjs.com/license
12
* @extends Ext.Component
14
* @cfg {String} text The button text
15
* @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
16
* CSS property of the button by default, so if you want a mixed icon/text button, set cls:"x-btn-text-icon")
17
* @cfg {Function} handler A function called when the button is clicked (can be used instead of click event)
18
* @cfg {Object} scope The scope of the handler
19
* @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width)
20
* @cfg {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
21
* @cfg {Boolean} hidden True to start hidden (defaults to false)
22
* @cfg {Boolean} disabled True to start disabled (defaults to false)
23
* @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
24
* @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed, only
25
* applies if enableToggle = true)
26
* @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
27
an {@link Ext.util.ClickRepeater} config object (defaults to false).
30
* @param {Object} config The config object
32
Ext.Button = Ext.extend(Ext.Component, {
34
* Read-only. True if this button is hidden
39
* Read-only. True if this button is disabled
44
* Read-only. True if this button is pressed (only if enableToggle = true)
49
* The Button's owner {@link Ext.Panel} (defaults to undefined, and is set automatically when
50
* the Button is added to a container). Read-only.
56
* @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
60
* @cfg {Boolean} allowDepress
61
* False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
65
* @cfg {Boolean} enableToggle
66
* True to enable pressed/not pressed toggling (defaults to false)
70
* @cfg {Function} toggleHandler
71
* Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params">
72
* <li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li>
73
* <li><b>state</b> : Boolean<div class="sub-desc">The next state if the Button, true means pressed.</div></li>
78
* Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
81
* @cfg {String} menuAlign
82
* The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
87
* @cfg {String} iconCls
88
* A css class which sets a background image to be used as the icon for this button
92
* submit, reset or button - defaults to 'button'
97
menuClassTarget: 'tr',
100
* @cfg {String} clickEvent
101
* The type of event to map to the button's event handler (defaults to 'click')
103
clickEvent : 'click',
106
* @cfg {Boolean} handleMouseEvents
107
* False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
109
handleMouseEvents : true,
112
* @cfg {String} tooltipType
113
* The type of tooltip to use. Either "qtip" (default) for QuickTips or "title" for title attribute.
115
tooltipType : 'qtip',
117
buttonSelector : "button:first",
120
* @cfg {Ext.Template} template (Optional)
121
* An {@link Ext.Template} with which to create the Button's main element. This Template must
122
* contain numeric substitution parameter 0 if it is to display the text property. Changing the template could
123
* require code modifications if required elements (e.g. a button) aren't present.
127
* A CSS class string to apply to the button's main element.
130
initComponent : function(){
131
Ext.Button.superclass.initComponent.call(this);
136
* Fires when this button is clicked
137
* @param {Button} this
138
* @param {EventObject} e The click event
143
* Fires when the "pressed" state of this button changes (only if enableToggle = true)
144
* @param {Button} this
145
* @param {Boolean} pressed
150
* Fires when the mouse hovers over the button
151
* @param {Button} this
152
* @param {Event} e The event object
157
* Fires when the mouse exits the button
158
* @param {Button} this
159
* @param {Event} e The event object
164
* If this button has a menu, this event fires when it is shown
165
* @param {Button} this
171
* If this button has a menu, this event fires when it is hidden
172
* @param {Button} this
177
* @event menutriggerover
178
* If this button has a menu, this event fires when the mouse enters the menu triggering element
179
* @param {Button} this
181
* @param {EventObject} e
185
* @event menutriggerout
186
* If this button has a menu, this event fires when the mouse leaves the menu triggering element
187
* @param {Button} this
189
* @param {EventObject} e
194
this.menu = Ext.menu.MenuMgr.get(this.menu);
196
if(typeof this.toggleGroup === 'string'){
197
this.enableToggle = true;
202
onRender : function(ct, position){
204
if(!Ext.Button.buttonTemplate){
205
// hideous table template
206
Ext.Button.buttonTemplate = new Ext.Template(
207
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
208
'<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
209
"</tr></tbody></table>");
211
this.template = Ext.Button.buttonTemplate;
213
var btn, targs = [this.text || ' ', this.type];
216
btn = this.template.insertBefore(position, targs, true);
218
btn = this.template.append(ct, targs, true);
220
var btnEl = btn.child(this.buttonSelector);
221
btnEl.on('focus', this.onFocus, this);
222
btnEl.on('blur', this.onBlur, this);
224
this.initButtonEl(btn, btnEl);
227
this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
229
Ext.ButtonToggleMgr.register(this);
233
initButtonEl : function(btn, btnEl){
236
btn.addClass("x-btn");
239
btnEl.setStyle('background-image', 'url(' +this.icon +')');
242
btnEl.addClass(this.iconCls);
244
btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
247
if(this.tabIndex !== undefined){
248
btnEl.dom.tabIndex = this.tabIndex;
251
if(typeof this.tooltip == 'object'){
252
Ext.QuickTips.register(Ext.apply({
256
btnEl.dom[this.tooltipType] = this.tooltip;
261
this.el.addClass("x-btn-pressed");
264
if(this.handleMouseEvents){
265
btn.on("mouseover", this.onMouseOver, this);
266
// new functionality for monitoring on the document level
267
//btn.on("mouseout", this.onMouseOut, this);
268
btn.on("mousedown", this.onMouseDown, this);
272
this.menu.on("show", this.onMenuShow, this);
273
this.menu.on("hide", this.onMenuHide, this);
277
this.el.dom.id = this.el.id = this.id;
281
var repeater = new Ext.util.ClickRepeater(btn,
282
typeof this.repeat == "object" ? this.repeat : {}
284
repeater.on("click", this.onClick, this);
287
btn.on(this.clickEvent, this.onClick, this);
291
afterRender : function(){
292
Ext.Button.superclass.afterRender.call(this);
294
this.autoWidth.defer(1, this);
301
* Sets the CSS class that provides a background image to use as the button's icon. This method also changes
302
* the value of the {@link iconCls} config internally.
303
* @param {String} cls The CSS class providing the icon image
305
setIconClass : function(cls){
307
this.el.child(this.buttonSelector).replaceClass(this.iconCls, cls);
313
beforeDestroy: function(){
315
var btn = this.el.child(this.buttonSelector);
317
btn.removeAllListeners();
321
Ext.destroy(this.menu);
326
onDestroy : function(){
328
Ext.ButtonToggleMgr.unregister(this);
333
autoWidth : function(){
335
this.el.setWidth("auto");
336
if(Ext.isIE7 && Ext.isStrict){
337
var ib = this.el.child(this.buttonSelector);
338
if(ib && ib.getWidth() > 20){
340
ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
344
if(this.el.getWidth() < this.minWidth){
345
this.el.setWidth(this.minWidth);
352
* Assigns this button's click handler
353
* @param {Function} handler The function to call when the button is clicked
354
* @param {Object} scope (optional) Scope for the function passed in
356
setHandler : function(handler, scope){
357
this.handler = handler;
362
* Sets this button's text
363
* @param {String} text The button text
365
setText : function(text){
368
this.el.child("td.x-btn-center " + this.buttonSelector).update(text);
374
* Gets the text for this button
375
* @return {String} The button text
377
getText : function(){
382
* If a state it passed, it becomes the pressed state otherwise the current state is toggled.
383
* @param {Boolean} state (optional) Force a particular state
385
toggle : function(state){
386
state = state === undefined ? !this.pressed : state;
387
if(state != this.pressed){
389
this.el.addClass("x-btn-pressed");
391
this.fireEvent("toggle", this, true);
393
this.el.removeClass("x-btn-pressed");
394
this.pressed = false;
395
this.fireEvent("toggle", this, false);
397
if(this.toggleHandler){
398
this.toggleHandler.call(this.scope || this, this, state);
407
this.el.child(this.buttonSelector).focus();
411
onDisable : function(){
413
if(!Ext.isIE6 || !this.text){
414
this.el.addClass(this.disabledClass);
416
this.el.dom.disabled = true;
418
this.disabled = true;
422
onEnable : function(){
424
if(!Ext.isIE6 || !this.text){
425
this.el.removeClass(this.disabledClass);
427
this.el.dom.disabled = false;
429
this.disabled = false;
433
* Show this button's menu (if it has one)
435
showMenu : function(){
437
this.menu.show(this.el, this.menuAlign);
443
* Hide this button's menu (if it has one)
445
hideMenu : function(){
453
* Returns true if the button has a menu and it is visible
456
hasVisibleMenu : function(){
457
return this.menu && this.menu.isVisible();
461
onClick : function(e){
469
if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
472
if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
475
this.fireEvent("click", this, e);
477
//this.el.removeClass("x-btn-over");
478
this.handler.call(this.scope || this, this, e);
484
isMenuTriggerOver : function(e, internal){
485
return this.menu && !internal;
489
isMenuTriggerOut : function(e, internal){
490
return this.menu && !internal;
494
onMouseOver : function(e){
496
var internal = e.within(this.el, true);
498
this.el.addClass("x-btn-over");
499
if(!this.monitoringMouseOver){
500
Ext.getDoc().on('mouseover', this.monitorMouseOver, this);
501
this.monitoringMouseOver = true;
503
this.fireEvent('mouseover', this, e);
505
if(this.isMenuTriggerOver(e, internal)){
506
this.fireEvent('menutriggerover', this, this.menu, e);
512
monitorMouseOver : function(e){
513
if(e.target != this.el.dom && !e.within(this.el)){
514
if(this.monitoringMouseOver){
515
Ext.getDoc().un('mouseover', this.monitorMouseOver, this);
516
this.monitoringMouseOver = false;
523
onMouseOut : function(e){
524
var internal = e.within(this.el) && e.target != this.el.dom;
525
this.el.removeClass("x-btn-over");
526
this.fireEvent('mouseout', this, e);
527
if(this.isMenuTriggerOut(e, internal)){
528
this.fireEvent('menutriggerout', this, this.menu, e);
532
onFocus : function(e){
534
this.el.addClass("x-btn-focus");
538
onBlur : function(e){
539
this.el.removeClass("x-btn-focus");
543
getClickEl : function(e, isUp){
548
onMouseDown : function(e){
549
if(!this.disabled && e.button == 0){
550
this.getClickEl(e).addClass("x-btn-click");
551
Ext.getDoc().on('mouseup', this.onMouseUp, this);
555
onMouseUp : function(e){
557
this.getClickEl(e, true).removeClass("x-btn-click");
558
Ext.getDoc().un('mouseup', this.onMouseUp, this);
562
onMenuShow : function(e){
563
this.ignoreNextClick = 0;
564
this.el.addClass("x-btn-menu-active");
565
this.fireEvent('menushow', this, this.menu);
568
onMenuHide : function(e){
569
this.el.removeClass("x-btn-menu-active");
570
this.ignoreNextClick = this.restoreClick.defer(250, this);
571
this.fireEvent('menuhide', this, this.menu);
575
restoreClick : function(){
576
this.ignoreNextClick = 0;
582
* @cfg {String} autoEl @hide
585
Ext.reg('button', Ext.Button);
587
// Private utility class used by Button
588
Ext.ButtonToggleMgr = function(){
591
function toggleGroup(btn, state){
593
var g = groups[btn.toggleGroup];
594
for(var i = 0, l = g.length; i < l; i++){
603
register : function(btn){
604
if(!btn.toggleGroup){
607
var g = groups[btn.toggleGroup];
609
g = groups[btn.toggleGroup] = [];
612
btn.on("toggle", toggleGroup);
615
unregister : function(btn){
616
if(!btn.toggleGroup){
619
var g = groups[btn.toggleGroup];
622
btn.un("toggle", toggleGroup);
b'\\ No newline at end of file'