/** + + + +The source code + + + + +/*! + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.Button * @extends Ext.BoxComponent * Simple Button class @@ -47,12 +54,6 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * @type Boolean */ pressed : false, - /** - * The Button's owner {@link Ext.Panel} (defaults to undefined, and is set automatically when - * the Button is added to a container). Read-only. - * @type Ext.Panel - * @property ownerCt - */ /** * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined) @@ -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:
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:
'x-btn-arrow' or 'x-btn-arrow-bottom' or '')this reference) in which the handler function is executed.
+ * Defaults to this Button.
* @return {Ext.Button} this
*/
setHandler : function(handler, scope){
@@ -489,12 +509,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
@@ -526,13 +562,6 @@ Ext.Button = Ext.extend(Ext.BoxComponent, {
return this;
},
- /**
- * Focus the button
- */
- focus : function(){
- this.btnEl.focus();
- },
-
// private
onDisable : function(){
this.onDisableChange(true);
@@ -561,6 +590,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;
@@ -570,7 +603,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;
@@ -581,7 +614,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
@@ -596,7 +629,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);
@@ -624,7 +657,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);
@@ -639,7 +672,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);
@@ -655,6 +688,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){
@@ -675,27 +717,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
@@ -703,11 +751,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);
@@ -767,6 +828,7 @@ Ext.ButtonToggleMgr = function(){
return null;
}
};
-}();
-
+}();
+
+
\ No newline at end of file