X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/src/widgets/Button.js diff --git a/src/widgets/Button.js b/src/widgets/Button.js index e69b1cc2..b6d363aa 100644 --- a/src/widgets/Button.js +++ b/src/widgets/Button.js @@ -1,8 +1,8 @@ /*! - * Ext JS Library 3.0.0 - * 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 @@ -16,7 +16,6 @@ *
b
: Buttone
: EventObjectWhen a custom {@link #template} is used, you must ensure that this selector results in the selection of * a focussable element.
- *Defaults to "button:first-child".
+ *Defaults to 'button:first-child'.
*/ buttonSelector : 'button:first-child', @@ -141,7 +135,13 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * *Defaults to 'small'.
*/ - scale: 'small', + scale : 'small', + + /** + * @cfg {Object} scope The scope (this reference) in which the + *{@link #handler}
and {@link #toggleHandler}
is
+ * executed. Defaults to this Button.
+ */
/**
* @cfg {String} iconAlign
@@ -185,8 +185,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(
@@ -249,8 +261,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;
@@ -258,28 +271,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:
'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){
@@ -483,12 +508,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
@@ -506,7 +547,9 @@ Ext.Button = Ext.extend(Ext.BoxComponent, {
toggle : function(state, suppressEvent){
state = state === undefined ? !this.pressed : !!state;
if(state != this.pressed){
- this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
+ if(this.rendered){
+ this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
+ }
this.pressed = state;
if(!suppressEvent){
this.fireEvent('toggle', this, state);
@@ -518,13 +561,6 @@ Ext.Button = Ext.extend(Ext.BoxComponent, {
return this;
},
- /**
- * Focus the button
- */
- focus : function(){
- this.btnEl.focus();
- },
-
// private
onDisable : function(){
this.onDisableChange(true);
@@ -534,7 +570,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, {
onEnable : function(){
this.onDisableChange(false);
},
-
+
onDisableChange : function(disabled){
if(this.el){
if(!Ext.isIE6 || !this.text){
@@ -553,6 +589,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;
@@ -562,7 +602,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;
@@ -573,7 +613,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
@@ -585,10 +630,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);
@@ -598,6 +641,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){
@@ -616,7 +666,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);
@@ -631,7 +681,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);
@@ -647,6 +697,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){
@@ -667,27 +726,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
@@ -695,11 +760,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);
@@ -759,4 +837,4 @@ Ext.ButtonToggleMgr = function(){
return null;
}
};
-}();
\ No newline at end of file
+}();