The source code

/*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */

/** * @class Ext.Button @@ -72,7 +73,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * @cfg {Function} toggleHandler * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:

button : Ext.Button
this Button object
state : Boolean
The next state if the Button, true means pressed.
state : Boolean
The next state of the Button, true means pressed.

*/ /** @@ -105,7 +106,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { /** * @cfg {String} clickEvent - * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu). + * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu). * Defaults to 'click'. */ clickEvent : 'click', @@ -192,8 +193,20 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * @type Menu * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option. */ + /** + * @cfg {Boolean} autoWidth + * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content. + * If the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent + * the button from doing this automatic sizing. + * Defaults to undefined. + */ initComponent : function(){ + if(this.menu){ + this.menu = Ext.menu.MenuMgr.get(this.menu); + this.menu.ownerCt = this; + } + Ext.Button.superclass.initComponent.call(this); this.addEvents( @@ -256,8 +269,9 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { */ 'menutriggerout' ); - if(this.menu){ - this.menu = Ext.menu.MenuMgr.get(this.menu); + + if (this.menu){ + this.menu.ownerCt = undefined; } if(Ext.isString(this.toggleGroup)){ this.enableToggle = true; @@ -265,28 +279,33 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { }, /** - *

This method returns an object which provides substitution parameters for the {@link #template Template} used + *

This method returns an Array which provides substitution parameters for the {@link #template Template} used * to create this Button's DOM structure.

Instances or subclasses which use a different Template to create a different DOM structure may need to provide their * own implementation of this method.

The default implementation which provides data for the default {@link #template} returns an Array containing the * following items:

The Button's {@link #text}
The <button>'s {@link #type}
The {@link iconCls} applied to the <button> {@link #btnEl element}
The {@link #cls} applied to the Button's main {@link #getEl Element}
A CSS class name controlling the Button's {@link #scale} and {@link #iconAlign icon alignment}
A CSS class name which applies an arrow to the Button if configured with a {@link #menu}
A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
The {@link #cls} CSS class name applied to the button's wrapping <table> element.
The Component id which is applied to the button's wrapping <table> element.

- * @return {Object} Substitution data for a Template. + * @return {Array} Substitution data for a Template. */ getTemplateArgs : function(){ - var cls = (this.cls || ''); - cls += (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon'; - if(this.pressed){ - cls += ' x-btn-pressed'; + return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id]; + }, + + // private + setButtonClass : function(){ + if(this.useSetClass){ + if(!Ext.isEmpty(this.oldCls)){ + this.el.removeClass([this.oldCls, 'x-btn-pressed']); + } + this.oldCls = (this.iconCls || this.icon) ? (this.text ? 'x-btn-text-icon' : 'x-btn-icon') : 'x-btn-noicon'; + this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]); } - return [this.text || ' ', this.type, this.iconCls || '', cls, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass()]; }, // protected @@ -300,11 +319,11 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(!Ext.Button.buttonTemplate){ // hideous table template Ext.Button.buttonTemplate = new Ext.Template( - '', + '

', '', - '', + '', '', - "

"); + ''); Ext.Button.buttonTemplate.compile(); } this.template = Ext.Button.buttonTemplate; @@ -338,19 +357,10 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { // private initButtonEl : function(btn, btnEl){ this.el = btn; - - if(this.id){ - var d = this.el.dom, - c = Ext.Element.cache; - - delete c[d.id]; - d.id = this.el.id = this.id; - c[d.id] = this.el; - } - if(this.icon){ - btnEl.setStyle('background-image', 'url(' +this.icon +')'); - } - if(this.tabIndex !== undefined){ + this.setIcon(this.icon); + this.setText(this.text); + this.setIconClass(this.iconCls); + if(Ext.isDefined(this.tabIndex)){ btnEl.dom.tabIndex = this.tabIndex; } if(this.tooltip){ @@ -378,14 +388,18 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(this.repeat){ var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {}); - this.mon(repeater, 'click', this.onClick, this); + this.mon(repeater, 'click', this.onRepeatClick, this); + }else{ + this.mon(btn, this.clickEvent, this.onClick, this); } - this.mon(btn, this.clickEvent, this.onClick, this); }, // private afterRender : function(){ Ext.Button.superclass.afterRender.call(this); + this.useSetClass = true; + this.setButtonClass(); + this.doc = Ext.getDoc(); this.doAutoWidth(); }, @@ -396,10 +410,12 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * @return {Ext.Button} this */ setIconClass : function(cls){ + this.iconCls = cls; if(this.el){ - this.btnEl.replaceClass(this.iconCls, cls); + this.btnEl.dom.className = ''; + this.btnEl.addClass(['x-btn-text', cls || '']); + this.setButtonClass(); } - this.iconCls = cls; return this; }, @@ -442,22 +458,27 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(this.rendered){ this.clearTip(); } - Ext.destroy(this.menu, this.repeater); + if(this.menu && this.destroyMenu !== false) { + Ext.destroy(this.btnEl, this.menu); + } + Ext.destroy(this.repeater); }, // private onDestroy : function(){ - var doc = Ext.getDoc(); - doc.un('mouseover', this.monitorMouseOver, this); - doc.un('mouseup', this.onMouseUp, this); if(this.rendered){ + this.doc.un('mouseover', this.monitorMouseOver, this); + this.doc.un('mouseup', this.onMouseUp, this); + delete this.doc; + delete this.btnEl; Ext.ButtonToggleMgr.unregister(this); } + Ext.Button.superclass.onDestroy.call(this); }, // private doAutoWidth : function(){ - if(this.el && this.text && this.width === undefined){ + if(this.autoWidth !== false && this.el && this.text && this.width === undefined){ this.el.setWidth('auto'); if(Ext.isIE7 && Ext.isStrict){ var ib = this.btnEl; @@ -477,7 +498,8 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { /** * Assigns this Button's click handler * @param {Function} handler The function to call when the button is clicked - * @param {Object} scope (optional) Scope for the function passed in. Defaults to this Button. + * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed. + * Defaults to this Button. * @return {Ext.Button} this */ setHandler : function(handler, scope){ @@ -494,12 +516,28 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { setText : function(text){ this.text = text; if(this.el){ - this.el.child('td.x-btn-mc ' + this.buttonSelector).update(text); + this.btnEl.update(text || ' '); + this.setButtonClass(); } this.doAutoWidth(); return this; }, + /** + * Sets the background image (inline style) of the button. This method also changes + * the value of the {@link icon} config internally. + * @param {String} icon The path to an image to display in the button + * @return {Ext.Button} this + */ + setIcon : function(icon){ + this.icon = icon; + if(this.el){ + this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : ''); + this.setButtonClass(); + } + return this; + }, + /** * Gets the text for this Button * @return {String} The button text @@ -531,13 +569,6 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { return this; }, - /** - * Focus the button - */ - focus : function(){ - this.btnEl.focus(); - }, - // private onDisable : function(){ this.onDisableChange(true); @@ -566,6 +597,10 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(this.tooltip){ Ext.QuickTips.getQuickTip().cancelShow(this.btnEl); } + if(this.menu.isVisible()){ + this.menu.hide(); + } + this.menu.ownerCt = this; this.menu.show(this.el, this.menuAlign); } return this; @@ -575,7 +610,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * Hide this button's menu (if it has one) */ hideMenu : function(){ - if(this.menu){ + if(this.hasVisibleMenu()){ this.menu.hide(); } return this; @@ -586,7 +621,12 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * @return {Boolean} */ hasVisibleMenu : function(){ - return this.menu && this.menu.isVisible(); + return this.menu && this.menu.ownerCt == this && this.menu.isVisible(); + }, + + // private + onRepeatClick : function(repeat, e){ + this.onClick(e); }, // private @@ -598,10 +638,8 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { return; } if(!this.disabled){ - if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){ - this.toggle(); - } - if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){ + this.doToggle(); + if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){ this.showMenu(); } this.fireEvent('click', this, e); @@ -611,6 +649,13 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { } } }, + + // private + doToggle: function(){ + if (this.enableToggle && (this.allowDepress !== false || !this.pressed)) { + this.toggle(); + } + }, // private isMenuTriggerOver : function(e, internal){ @@ -629,7 +674,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(!internal){ this.el.addClass('x-btn-over'); if(!this.monitoringMouseOver){ - Ext.getDoc().on('mouseover', this.monitorMouseOver, this); + this.doc.on('mouseover', this.monitorMouseOver, this); this.monitoringMouseOver = true; } this.fireEvent('mouseover', this, e); @@ -644,7 +689,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { monitorMouseOver : function(e){ if(e.target != this.el.dom && !e.within(this.el)){ if(this.monitoringMouseOver){ - Ext.getDoc().un('mouseover', this.monitorMouseOver, this); + this.doc.un('mouseover', this.monitorMouseOver, this); this.monitoringMouseOver = false; } this.onMouseOut(e); @@ -660,6 +705,15 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { this.fireEvent('menutriggerout', this, this.menu, e); } }, + + focus : function() { + this.btnEl.focus(); + }, + + blur : function() { + this.btnEl.blur(); + }, + // private onFocus : function(e){ if(!this.disabled){ @@ -680,27 +734,33 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { onMouseDown : function(e){ if(!this.disabled && e.button === 0){ this.getClickEl(e).addClass('x-btn-click'); - Ext.getDoc().on('mouseup', this.onMouseUp, this); + this.doc.on('mouseup', this.onMouseUp, this); } }, // private onMouseUp : function(e){ if(e.button === 0){ this.getClickEl(e, true).removeClass('x-btn-click'); - Ext.getDoc().un('mouseup', this.onMouseUp, this); + this.doc.un('mouseup', this.onMouseUp, this); } }, // private onMenuShow : function(e){ - this.ignoreNextClick = 0; - this.el.addClass('x-btn-menu-active'); - this.fireEvent('menushow', this, this.menu); + if(this.menu.ownerCt == this){ + this.menu.ownerCt = this; + this.ignoreNextClick = 0; + this.el.addClass('x-btn-menu-active'); + this.fireEvent('menushow', this, this.menu); + } }, // private onMenuHide : function(e){ - this.el.removeClass('x-btn-menu-active'); - this.ignoreNextClick = this.restoreClick.defer(250, this); - this.fireEvent('menuhide', this, this.menu); + if(this.menu.ownerCt == this){ + this.el.removeClass('x-btn-menu-active'); + this.ignoreNextClick = this.restoreClick.defer(250, this); + this.fireEvent('menuhide', this, this.menu); + delete this.menu.ownerCt; + } }, // private @@ -708,11 +768,24 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { this.ignoreNextClick = 0; } - - /** * @cfg {String} autoEl @hide */ + /** + * @cfg {String/Object} html @hide + */ + /** + * @cfg {String} contentEl @hide + */ + /** + * @cfg {Mixed} data @hide + */ + /** + * @cfg {Mixed} tpl @hide + */ + /** + * @cfg {String} tplWriteMode @hide + */ }); Ext.reg('button', Ext.Button); @@ -772,6 +845,7 @@ Ext.ButtonToggleMgr = function(){ return null; } }; -}();