X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..530ef4b6c5b943cfa68b779d11cf7de29aa878bf:/src/widgets/Button.js?ds=sidebyside diff --git a/src/widgets/Button.js b/src/widgets/Button.js index 99fc181f..6f8a4e86 100644 --- a/src/widgets/Button.js +++ b/src/widgets/Button.js @@ -1,6 +1,6 @@ /*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */ @@ -65,7 +65,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: */ /** @@ -98,7 +98,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', @@ -185,6 +185,13 @@ 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(){ Ext.Button.superclass.initComponent.call(this); @@ -258,28 +265,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:

- * @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 @@ -293,11 +305,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; @@ -331,19 +343,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){ @@ -379,6 +382,9 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { // private afterRender : function(){ Ext.Button.superclass.afterRender.call(this); + this.useSetClass = true; + this.setButtonClass(); + this.doc = Ext.getDoc(); this.doAutoWidth(); }, @@ -389,10 +395,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; }, @@ -435,22 +443,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.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; @@ -470,7 +483,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){ @@ -487,12 +501,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 @@ -524,13 +554,6 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { return this; }, - /** - * Focus the button - */ - focus : function(){ - this.btnEl.focus(); - }, - // private onDisable : function(){ this.onDisableChange(true); @@ -559,6 +582,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; @@ -568,7 +595,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; @@ -579,7 +606,7 @@ 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 @@ -594,7 +621,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){ this.toggle(); } - if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){ + if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){ this.showMenu(); } this.fireEvent('click', this, e); @@ -622,7 +649,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); @@ -637,7 +664,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); @@ -653,6 +680,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){ @@ -673,27 +709,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 @@ -701,11 +743,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); @@ -765,4 +820,4 @@ Ext.ButtonToggleMgr = function(){ return null; } }; -}(); \ No newline at end of file +}();