/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-/**
- * @class Ext.Button
- * @extends Ext.BoxComponent
- * Simple Button class
- * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
- * The handler is passed the following parameters:
- * b : ButtonThis Button.e : EventObjectThe click event.
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
- * See also {@link Ext.Panel}.{@link Ext.Panel#minButtonWidth minButtonWidth}.
- * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
- * @cfg {Boolean} hidden True to start hidden (defaults to false)
- * @cfg {Boolean} disabled True to start disabled (defaults to false)
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
- * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
- * @constructor
- * Create a new button
- * @param {Object} config The config object
- * @xtype button
+
+ * @docauthor Robert Dougan <rob@sencha.com>
+ *
+ * Create simple buttons with this component. Customisations include {@link #iconAlign aligned}
+ * {@link #iconCls icons}, {@link #menu dropdown menus}, {@link #tooltip tooltips}
+ * and {@link #scale sizing options}. Specify a {@link #handler handler} to run code when
+ * a user clicks the button, or use {@link #listeners listeners} for other events such as
+ * {@link #mouseover mouseover}. Example usage:
+ *
+ * @example
+ * Ext.create('Ext.Button', {
+ * text: 'Click me',
+ * renderTo: Ext.getBody(),
+ * handler: function() {
+ * alert('You clicked the button!')
+ * }
+ * });
+ *
+ * The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler}
+ * method. Example usage:
+ *
+ * @example
+ * Ext.create('Ext.Button', {
+ * text : 'Dynamic Handler Button',
+ * renderTo: Ext.getBody(),
+ * handler : function() {
+ * // this button will spit out a different number every time you click it.
+ * // so firstly we must check if that number is already set:
+ * if (this.clickCount) {
+ * // looks like the property is already set, so lets just add 1 to that number and alert the user
+ * this.clickCount++;
+ * alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
+ * } else {
+ * // if the clickCount property is not set, we will set it and alert the user
+ * this.clickCount = 1;
+ * alert('You just clicked the button for the first time!\n\nTry pressing it again..');
+ * }
+ * }
+ * });
+ *
+ * A button within a container:
+ *
+ * @example
+ * Ext.create('Ext.Container', {
+ * renderTo: Ext.getBody(),
+ * items : [
+ * {
+ * xtype: 'button',
+ * text : 'My Button'
+ * }
+ * ]
+ * });
+ *
+ * A useful option of Button is the {@link #scale} configuration. This configuration has three different options:
+ *
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ *
+ * Example usage:
+ *
+ * @example
+ * Ext.create('Ext.Button', {
+ * renderTo: document.body,
+ * text : 'Click me',
+ * scale : 'large'
+ * });
+ *
+ * Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`.
+ * Example usage:
+ *
+ * @example
+ * Ext.create('Ext.Button', {
+ * renderTo: Ext.getBody(),
+ * text: 'Click Me',
+ * enableToggle: true
+ * });
+ *
+ * You can assign a menu to a button by using the {@link #menu} configuration. This standard configuration
+ * can either be a reference to a {@link Ext.menu.Menu menu} object, a {@link Ext.menu.Menu menu} id or a
+ * {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically
+ * added to the button. You can change the alignment of the arrow using the {@link #arrowAlign} configuration
+ * on button. Example usage:
+ *
+ * @example
+ * Ext.create('Ext.Button', {
+ * text : 'Menu button',
+ * renderTo : Ext.getBody(),
+ * arrowAlign: 'bottom',
+ * menu : [
+ * {text: 'Item 1'},
+ * {text: 'Item 2'},
+ * {text: 'Item 3'},
+ * {text: 'Item 4'}
+ * ]
+ * });
+ *
+ * Using listeners, you can easily listen to events fired by any component, using the {@link #listeners}
+ * configuration or using the {@link #addListener} method. Button has a variety of different listeners:
+ *
+ * - `click`
+ * - `toggle`
+ * - `mouseover`
+ * - `mouseout`
+ * - `mouseshow`
+ * - `menuhide`
+ * - `menutriggerover`
+ * - `menutriggerout`
+ *
+ * Example usage:
+ *
+ * @example
+ * Ext.create('Ext.Button', {
+ * text : 'Button',
+ * renderTo : Ext.getBody(),
+ * listeners: {
+ * click: function() {
+ * // this == the button, as we are in the local scope
+ * this.setText('I was clicked!');
+ * },
+ * mouseover: function() {
+ * // set a new config which says we moused over, if not already set
+ * if (!this.mousedOver) {
+ * this.mousedOver = true;
+ * alert('You moused over a button!\n\nI wont do this again.');
+ * }
+ * }
+ * }
+ * });
*/
-Ext.Button = Ext.extend(Ext.BoxComponent, {
- /**
- * Read-only. True if this button is hidden
- * @type Boolean
+Ext.define('Ext.button.Button', {
+
+ /* Begin Definitions */
+ alias: 'widget.button',
+ extend: 'Ext.Component',
+
+ requires: [
+ 'Ext.menu.Manager',
+ 'Ext.util.ClickRepeater',
+ 'Ext.layout.component.Button',
+ 'Ext.util.TextMetrics',
+ 'Ext.util.KeyMap'
+ ],
+
+ alternateClassName: 'Ext.Button',
+ /* End Definitions */
+
+ isButton: true,
+ componentLayout: 'button',
+
+ * @property {Boolean} hidden
+ * True if this button is hidden. Read-only.
*/
- hidden : false,
- /**
- * Read-only. True if this button is disabled
- * @type Boolean
+ hidden: false,
+
+ * @property {Boolean} disabled
+ * True if this button is disabled. Read-only.
*/
- disabled : false,
- /**
- * Read-only. True if this button is pressed (only if enableToggle = true)
- * @type Boolean
+ disabled: false,
+
+ * @property {Boolean} pressed
+ * True if this button is pressed (only if enableToggle = true). Read-only.
*/
- pressed : false,
+ pressed: false,
- /**
- * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
+ * @cfg {String} text
+ * The button text to be used as innerHTML (html tags are accepted).
*/
- /**
- * @cfg {Boolean} allowDepress
- * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
+ * @cfg {String} icon
+ * The path to an image to display in the button (the image will be set as the background-image CSS property of the
+ * button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
*/
- /**
- * @cfg {Boolean} enableToggle
- * True to enable pressed/not pressed toggling (defaults to false)
+ * @cfg {Function} handler
+ * A function called when the button is clicked (can be used instead of click event).
+ * @cfg {Ext.button.Button} handler.button This button.
+ * @cfg {Ext.EventObject} handler.e The click event.
*/
- enableToggle : false,
- /**
- * @cfg {Function} toggleHandler
- * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:
{@link Ext.Toolbar.Item#overflowText overflowText}.
+ * @cfg {Boolean} [pressed=false]
+ * True to start pressed (only if enableToggle = true)
*/
- /**
- * @cfg {String} iconCls
- * A css class which sets a background image to be used as the icon for this button
+
+ * @cfg {String} toggleGroup
+ * The group this toggle button is a member of (only 1 per group can be pressed)
*/
- /**
- * @cfg {String} type
- * submit, reset or button - defaults to 'button'
+
+ * @cfg {Boolean/Object} [repeat=false]
+ * True to repeat fire the click event while the mouse is down. This can also be a
+ * {@link Ext.util.ClickRepeater ClickRepeater} config object.
*/
- type : 'button',
- // private
- menuClassTarget : 'tr:nth(2)',
+ * @cfg {Number} tabIndex
+ * Set a DOM tabIndex for this button.
+ */
+
+ * @cfg {Boolean} [allowDepress=true]
+ * False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true.
+ */
+
+ * @cfg {Boolean} [enableToggle=false]
+ * True to enable pressed/not pressed toggling.
+ */
+ enableToggle: false,
+
+ * @cfg {Function} toggleHandler
+ * Function called when a Button with {@link #enableToggle} set to true is clicked.
+ * @cfg {Ext.button.Button} toggleHandler.button This button.
+ * @cfg {Boolean} toggleHandler.state The next state of the Button, true means pressed.
+ */
+
+ * @cfg {Ext.menu.Menu/String/Object} menu
+ * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob.
+ */
+
+ * @cfg {String} menuAlign
+ * The position to align the menu to (see {@link Ext.Element#alignTo} for more details).
+ */
+ menuAlign: 'tl-bl?',
+
+ * @cfg {String} textAlign
+ * The text alignment for this button (center, left, right).
+ */
+ textAlign: 'center',
+
+ * @cfg {String} overflowText
+ * If used in a {@link Ext.toolbar.Toolbar Toolbar}, the text to be used if this item is shown in the overflow menu.
+ * See also {@link Ext.toolbar.Item}.`{@link Ext.toolbar.Item#overflowText overflowText}`.
+ */
+
+ * @cfg {String} iconCls
+ * A css class which sets a background image to be used as the icon for this button.
+ */
+
+ * @cfg {String} type
+ * The type of `<input>` to create: submit, reset or button.
+ */
+ type: 'button',
- /**
- * @cfg {String} clickEvent
+ * @cfg {String} clickEvent
* 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',
-
- /**
- * @cfg {Boolean} handleMouseEvents
- * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
- */
- handleMouseEvents : true,
-
- /**
- * @cfg {String} tooltipType
- * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
- */
- tooltipType : 'qtip',
-
- /**
- * @cfg {String} buttonSelector
- * (Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the - * DOM structure created.
- *When 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'.
- */ - buttonSelector : 'button:first-child', - - /** - * @cfg {String} scale - *(Optional) The size of the Button. Three values are allowed:
- *Defaults to '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
- * (Optional) The side of the Button box to render the icon. Four values are allowed:
- *Defaults to 'left'.
- */ - iconAlign : 'left', - - /** - * @cfg {String} arrowAlign - *(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}. - * Two values are allowed:
- *Defaults to 'right'.
- */ - arrowAlign : 'right', - - /** - * @cfg {Ext.Template} template (Optional) - *A {@link Ext.Template Template} used to create the Button's DOM structure.
- * Instances, or subclasses which need a different DOM structure may provide a different - * template layout in conjunction with an implementation of {@link #getTemplateArgs}. - * @type Ext.Template - * @property template - */ - /** - * @cfg {String} cls + */ + clickEvent: 'click', + + * @cfg {Boolean} preventDefault + * True to prevent the default action when the {@link #clickEvent} is processed. + */ + preventDefault: true, + + * @cfg {Boolean} handleMouseEvents + * False to disable visual cues on mouseover, mouseout and mousedown. + */ + handleMouseEvents: true, + + * @cfg {String} tooltipType + * The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute. + */ + tooltipType: 'qtip', + + * @cfg {String} [baseCls='x-btn'] + * The base CSS class to add to all buttons. + */ + baseCls: Ext.baseCSSPrefix + 'btn', + + * @cfg {String} pressedCls + * The CSS class to add to a button when it is in the pressed state. + */ + pressedCls: 'pressed', + + * @cfg {String} overCls + * The CSS class to add to a button when it is in the over (hovered) state. + */ + overCls: 'over', + + * @cfg {String} focusCls + * The CSS class to add to a button when it is in the focussed state. + */ + focusCls: 'focus', + + * @cfg {String} menuActiveCls + * The CSS class to add to a button when it's menu is active. + */ + menuActiveCls: 'menu-active', + + * @cfg {String} href + * The URL to visit when the button is clicked. Specifying this config is equivalent to specifying: + * + * handler: function() { window.location = "http://www.sencha.com" } + */ + + * @cfg {Object} baseParams + * An object literal of parameters to pass to the url when the {@link #href} property is specified. + */ + + * @cfg {Object} params + * An object literal of parameters to pass to the url when the {@link #href} property is specified. Any params + * override {@link #baseParams}. New params can be set using the {@link #setParams} method. + */ + + ariaRole: 'button', + + // inherited + renderTpl: + '<em id="{id}-btnWrap" class="{splitCls}">' + + '<tpl if="href">' + + '<a id="{id}-btnEl" href="{href}" target="{target}"<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="link">' + + '<span id="{id}-btnInnerEl" class="{baseCls}-inner">' + + '{text}' + + '</span>' + + '<span id="{id}-btnIconEl" class="{baseCls}-icon"></span>' + + '</a>' + + '</tpl>' + + '<tpl if="!href">' + + '<button id="{id}-btnEl" type="{type}" hidefocus="true"' + + // the autocomplete="off" is required to prevent Firefox from remembering + // the button's disabled state between page reloads. + '<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="button" autocomplete="off">' + + '<span id="{id}-btnInnerEl" class="{baseCls}-inner" style="{innerSpanStyle}">' + + '{text}' + + '</span>' + + '<span id="{id}-btnIconEl" class="{baseCls}-icon {iconCls}"> </span>' + + '</button>' + + '</tpl>' + + '</em>' , + + * @cfg {String} scale + * The size of the Button. Three values are allowed: + * + * - 'small' - Results in the button element being 16px high. + * - 'medium' - Results in the button element being 24px high. + * - 'large' - Results in the button element being 32px high. + */ + scale: 'small', + + * @private + * An array of allowed scales. + */ + allowedScales: ['small', 'medium', 'large'], + + * @cfg {Object} scope + * The scope (**this** reference) in which the `{@link #handler}` and `{@link #toggleHandler}` is executed. + * Defaults to this Button. + */ + + * @cfg {String} iconAlign + * The side of the Button box to render the icon. Four values are allowed: + * + * - 'top' + * - 'right' + * - 'bottom' + * - 'left' + */ + iconAlign: 'left', + + * @cfg {String} arrowAlign + * The side of the Button box to render the arrow if the button has an associated {@link #menu}. Two + * values are allowed: + * + * - 'right' + * - 'bottom' + */ + arrowAlign: 'right', + + * @cfg {String} arrowCls + * The className used for the inner arrow element if the button has a menu. + */ + arrowCls: 'arrow', + + * @property {Ext.Template} template + * A {@link Ext.Template Template} used to create the Button's DOM structure. + * + * Instances, or subclasses which need a different DOM structure may provide a different template layout in + * conjunction with an implementation of {@link #getTemplateArgs}. + */ + + * @cfg {String} cls * A CSS class string to apply to the button's main element. */ - /** - * @property menu - * @type Menu - * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option. + + * @property {Ext.menu.Menu} menu + * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config + * option. */ - initComponent : function(){ - Ext.Button.superclass.initComponent.call(this); + * @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. + */ - this.addEvents( - /** - * @event click + maskOnDisable: false, + + // inherit docs + initComponent: function() { + var me = this; + me.callParent(arguments); + + me.addEvents( + * @event click * Fires when this button is clicked - * @param {Button} this - * @param {EventObject} e The click event + * @param {Ext.button.Button} this + * @param {Event} e The click event */ 'click', - /** - * @event toggle + + * @event toggle * Fires when the 'pressed' state of this button changes (only if enableToggle = true) - * @param {Button} this + * @param {Ext.button.Button} this * @param {Boolean} pressed */ 'toggle', - /** - * @event mouseover + + * @event mouseover * Fires when the mouse hovers over the button - * @param {Button} this + * @param {Ext.button.Button} this * @param {Event} e The event object */ 'mouseover', - /** - * @event mouseout + + * @event mouseout * Fires when the mouse exits the button - * @param {Button} this + * @param {Ext.button.Button} this * @param {Event} e The event object */ 'mouseout', - /** - * @event menushow + + * @event menushow * If this button has a menu, this event fires when it is shown - * @param {Button} this - * @param {Menu} menu + * @param {Ext.button.Button} this + * @param {Ext.menu.Menu} menu */ 'menushow', - /** - * @event menuhide + + * @event menuhide * If this button has a menu, this event fires when it is hidden - * @param {Button} this - * @param {Menu} menu + * @param {Ext.button.Button} this + * @param {Ext.menu.Menu} menu */ 'menuhide', - /** - * @event menutriggerover + + * @event menutriggerover * If this button has a menu, this event fires when the mouse enters the menu triggering element - * @param {Button} this - * @param {Menu} menu - * @param {EventObject} e + * @param {Ext.button.Button} this + * @param {Ext.menu.Menu} menu + * @param {Event} e */ 'menutriggerover', - /** - * @event menutriggerout + + * @event menutriggerout * If this button has a menu, this event fires when the mouse leaves the menu triggering element - * @param {Button} this - * @param {Menu} menu - * @param {EventObject} e + * @param {Ext.button.Button} this + * @param {Ext.menu.Menu} menu + * @param {Event} e */ 'menutriggerout' ); - if(this.menu){ - this.menu = Ext.menu.MenuMgr.get(this.menu); - } - if(Ext.isString(this.toggleGroup)){ - this.enableToggle = true; - } - }, - -/** - *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.
+ * @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
* Defaults to this Button.
- * @return {Ext.Button} this
+ * @return {Ext.button.Button} this
*/
- setHandler : function(handler, scope){
+ setHandler: function(handler, scope) {
this.handler = handler;
this.scope = scope;
return this;
},
- /**
- * Sets this Button's text
+ * Sets this Button's text
* @param {String} text The button text
- * @return {Ext.Button} this
+ * @return {Ext.button.Button} this
*/
- setText : function(text){
- this.text = text;
- if(this.el){
- this.btnEl.update(text || ' ');
- this.setButtonClass();
+ setText: function(text) {
+ var me = this;
+ me.text = text;
+ if (me.el) {
+ me.btnInnerEl.update(text || ' ');
+ me.setButtonCls();
}
- this.doAutoWidth();
- return this;
+ me.doComponentLayout();
+ return me;
},
- /**
- * Sets the background image (inline style) of the button. This method also changes
- * the value of the {@link icon} config internally.
+ * 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
+ * @return {Ext.button.Button} this
*/
- setIcon : function(icon){
- this.icon = icon;
- if(this.el){
- this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
- this.setButtonClass();
+ setIcon: function(icon) {
+ var me = this,
+ iconEl = me.btnIconEl;
+
+ me.icon = icon;
+ if (iconEl) {
+ iconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
+ me.setButtonCls();
}
- return this;
+ return me;
},
- /**
- * Gets the text for this Button
+ * Gets the text for this Button
* @return {String} The button text
*/
- getText : function(){
+ getText: function() {
return this.text;
},
- /**
- * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
- * @param {Boolean} state (optional) Force a particular state
- * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.
- * @return {Ext.Button} this
+ * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
+ * @param {Boolean} [state] Force a particular state
+ * @param {Boolean} [suppressEvent=false] True to stop events being fired when calling this method.
+ * @return {Ext.button.Button} this
*/
- toggle : function(state, suppressEvent){
- state = state === undefined ? !this.pressed : !!state;
- if(state != this.pressed){
- if(this.rendered){
- this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
+ toggle: function(state, suppressEvent) {
+ var me = this;
+ state = state === undefined ? !me.pressed : !!state;
+ if (state !== me.pressed) {
+ if (me.rendered) {
+ me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls);
}
- this.pressed = state;
- if(!suppressEvent){
- this.fireEvent('toggle', this, state);
- if(this.toggleHandler){
- this.toggleHandler.call(this.scope || this, this, state);
- }
+ me.btnEl.dom.setAttribute('aria-pressed', state);
+ me.pressed = state;
+ if (!suppressEvent) {
+ me.fireEvent('toggle', me, state);
+ Ext.callback(me.toggleHandler, me.scope || me, [me, state]);
}
}
- return this;
- },
-
- // private
- onDisable : function(){
- this.onDisableChange(true);
- },
-
- // private
- onEnable : function(){
- this.onDisableChange(false);
+ return me;
},
-
- onDisableChange : function(disabled){
- if(this.el){
- if(!Ext.isIE6 || !this.text){
- this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);
- }
- this.el.dom.disabled = disabled;
+
+ maybeShowMenu: function(){
+ var me = this;
+ if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) {
+ me.showMenu();
}
- this.disabled = disabled;
},
- /**
- * Show this button's menu (if it has one)
+ * Shows this button's menu (if it has one)
*/
- showMenu : function(){
- if(this.rendered && this.menu){
- if(this.tooltip){
- Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);
+ showMenu: function() {
+ var me = this;
+ if (me.rendered && me.menu) {
+ if (me.tooltip && me.getTipAttr() != 'title') {
+ Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.btnEl);
}
- if(this.menu.isVisible()){
- this.menu.hide();
+ if (me.menu.isVisible()) {
+ me.menu.hide();
}
- this.menu.ownerCt = this;
- this.menu.show(this.el, this.menuAlign);
+
+ me.menu.showBy(me.el, me.menuAlign);
}
- return this;
+ return me;
},
- /**
- * Hide this button's menu (if it has one)
+ * Hides this button's menu (if it has one)
*/
- hideMenu : function(){
- if(this.hasVisibleMenu()){
+ hideMenu: function() {
+ if (this.hasVisibleMenu()) {
this.menu.hide();
}
return this;
},
- /**
- * Returns true if the button has a menu and it is visible
+ * Returns true if the button has a menu and it is visible
* @return {Boolean}
*/
- hasVisibleMenu : function(){
- return this.menu && this.menu.ownerCt == this && this.menu.isVisible();
+ hasVisibleMenu: function() {
+ var menu = this.menu;
+ return menu && menu.rendered && menu.isVisible();
+ },
+
+ // private
+ onRepeatClick: function(repeat, e) {
+ this.onClick(e);
},
// private
- onClick : function(e){
- if(e){
+ onClick: function(e) {
+ var me = this;
+ if (me.preventDefault || (me.disabled && me.getHref()) && e) {
e.preventDefault();
}
- if(e.button !== 0){
+ if (e.button !== 0) {
return;
}
- if(!this.disabled){
- if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
- this.toggle();
- }
- if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){
- this.showMenu();
- }
- this.fireEvent('click', this, e);
- if(this.handler){
- //this.el.removeClass('x-btn-over');
- this.handler.call(this.scope || this, this, e);
- }
+ if (!me.disabled) {
+ me.doToggle();
+ me.maybeShowMenu();
+ me.fireHandler(e);
}
},
-
- // private
- isMenuTriggerOver : function(e, internal){
- return this.menu && !internal;
+
+ fireHandler: function(e){
+ var me = this,
+ handler = me.handler;
+
+ me.fireEvent('click', me, e);
+ if (handler) {
+ handler.call(me.scope || me, me, e);
+ }
+ me.onBlur();
+ },
+
+ doToggle: function(){
+ var me = this;
+ if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
+ me.toggle();
+ }
},
- // private
- isMenuTriggerOut : function(e, internal){
- return this.menu && !internal;
+ * @private mouseover handler called when a mouseover event occurs anywhere within the encapsulating element.
+ * The targets are interrogated to see what is being entered from where.
+ * @param e
+ */
+ onMouseOver: function(e) {
+ var me = this;
+ if (!me.disabled && !e.within(me.el, true, true)) {
+ me.onMouseEnter(e);
+ }
},
- // private
- onMouseOver : function(e){
- if(!this.disabled){
- var internal = e.within(this.el, true);
- if(!internal){
- this.el.addClass('x-btn-over');
- if(!this.monitoringMouseOver){
- this.doc.on('mouseover', this.monitorMouseOver, this);
- this.monitoringMouseOver = true;
- }
- this.fireEvent('mouseover', this, e);
- }
- if(this.isMenuTriggerOver(e, internal)){
- this.fireEvent('menutriggerover', this, this.menu, e);
+ * @private
+ * mouseout handler called when a mouseout event occurs anywhere within the encapsulating element -
+ * or the mouse leaves the encapsulating element.
+ * The targets are interrogated to see what is being exited to where.
+ * @param e
+ */
+ onMouseOut: function(e) {
+ var me = this;
+ if (!e.within(me.el, true, true)) {
+ if (me.overMenuTrigger) {
+ me.onMenuTriggerOut(e);
}
+ me.onMouseLeave(e);
}
},
- // private
- monitorMouseOver : function(e){
- if(e.target != this.el.dom && !e.within(this.el)){
- if(this.monitoringMouseOver){
- this.doc.un('mouseover', this.monitorMouseOver, this);
- this.monitoringMouseOver = false;
+ * @private
+ * mousemove handler called when the mouse moves anywhere within the encapsulating element.
+ * The position is checked to determine if the mouse is entering or leaving the trigger area. Using
+ * mousemove to check this is more resource intensive than we'd like, but it is necessary because
+ * the trigger area does not line up exactly with sub-elements so we don't always get mouseover/out
+ * events when needed. In the future we should consider making the trigger a separate element that
+ * is absolutely positioned and sized over the trigger area.
+ */
+ onMouseMove: function(e) {
+ var me = this,
+ el = me.el,
+ over = me.overMenuTrigger,
+ overlap, btnSize;
+
+ if (me.split) {
+ if (me.arrowAlign === 'right') {
+ overlap = e.getX() - el.getX();
+ btnSize = el.getWidth();
+ } else {
+ overlap = e.getY() - el.getY();
+ btnSize = el.getHeight();
+ }
+
+ if (overlap > (btnSize - me.getTriggerSize())) {
+ if (!over) {
+ me.onMenuTriggerOver(e);
+ }
+ } else {
+ if (over) {
+ me.onMenuTriggerOut(e);
+ }
}
- this.onMouseOut(e);
}
},
- // private
- onMouseOut : function(e){
- var internal = e.within(this.el) && e.target != this.el.dom;
- this.el.removeClass('x-btn-over');
- this.fireEvent('mouseout', this, e);
- if(this.isMenuTriggerOut(e, internal)){
- this.fireEvent('menutriggerout', this, this.menu, e);
+ * @private
+ * Measures the size of the trigger area for menu and split buttons. Will be a width for
+ * a right-aligned trigger and a height for a bottom-aligned trigger. Cached after first measurement.
+ */
+ getTriggerSize: function() {
+ var me = this,
+ size = me.triggerSize,
+ side, sideFirstLetter, undef;
+
+ if (size === undef) {
+ side = me.arrowAlign;
+ sideFirstLetter = side.charAt(0);
+ size = me.triggerSize = me.el.getFrameWidth(sideFirstLetter) + me.btnWrap.getFrameWidth(sideFirstLetter) + (me.frameSize && me.frameSize[side] || 0);
}
+ return size;
+ },
+
+ * @private
+ * virtual mouseenter handler called when it is detected that the mouseout event
+ * signified the mouse entering the encapsulating element.
+ * @param e
+ */
+ onMouseEnter: function(e) {
+ var me = this;
+ me.addClsWithUI(me.overCls);
+ me.fireEvent('mouseover', me, e);
},
- focus : function() {
- this.btnEl.focus();
+ * @private
+ * virtual mouseleave handler called when it is detected that the mouseover event
+ * signified the mouse entering the encapsulating element.
+ * @param e
+ */
+ onMouseLeave: function(e) {
+ var me = this;
+ me.removeClsWithUI(me.overCls);
+ me.fireEvent('mouseout', me, e);
},
- blur : function() {
- this.btnEl.blur();
+ * @private
+ * virtual mouseenter handler called when it is detected that the mouseover event
+ * signified the mouse entering the arrow area of the button - the <em>.
+ * @param e
+ */
+ onMenuTriggerOver: function(e) {
+ var me = this;
+ me.overMenuTrigger = true;
+ me.fireEvent('menutriggerover', me, me.menu, e);
},
- // private
- onFocus : function(e){
- if(!this.disabled){
- this.el.addClass('x-btn-focus');
+ * @private
+ * virtual mouseleave handler called when it is detected that the mouseout event
+ * signified the mouse leaving the arrow area of the button - the <em>.
+ * @param e
+ */
+ onMenuTriggerOut: function(e) {
+ var me = this;
+ delete me.overMenuTrigger;
+ me.fireEvent('menutriggerout', me, me.menu, e);
+ },
+
+ // inherit docs
+ enable : function(silent) {
+ var me = this;
+
+ me.callParent(arguments);
+
+ me.removeClsWithUI('disabled');
+
+ return me;
+ },
+
+ // inherit docs
+ disable : function(silent) {
+ var me = this;
+
+ me.callParent(arguments);
+
+ me.addClsWithUI('disabled');
+ me.removeClsWithUI(me.overCls);
+
+ return me;
+ },
+
+ * Method to change the scale of the button. See {@link #scale} for allowed configurations.
+ * @param {String} scale The scale to change to.
+ */
+ setScale: function(scale) {
+ var me = this,
+ ui = me.ui.replace('-' + me.scale, '');
+
+ //check if it is an allowed scale
+ if (!Ext.Array.contains(me.allowedScales, scale)) {
+ throw('#setScale: scale must be an allowed scale (' + me.allowedScales.join(', ') + ')');
+ }
+
+ me.scale = scale;
+ me.setUI(ui);
+ },
+
+ // inherit docs
+ setUI: function(ui) {
+ var me = this;
+
+ //we need to append the scale to the UI, if not already done
+ if (me.scale && !ui.match(me.scale)) {
+ ui = ui + '-' + me.scale;
}
+
+ me.callParent([ui]);
+
+ // Set all the state classNames, as they need to include the UI
+ // me.disabledCls += ' ' + me.baseCls + '-' + me.ui + '-disabled';
},
+
// private
- onBlur : function(e){
- this.el.removeClass('x-btn-focus');
+ onFocus: function(e) {
+ var me = this;
+ if (!me.disabled) {
+ me.addClsWithUI(me.focusCls);
+ }
},
// private
- getClickEl : function(e, isUp){
- return this.el;
+ onBlur: function(e) {
+ var me = this;
+ me.removeClsWithUI(me.focusCls);
},
// private
- onMouseDown : function(e){
- if(!this.disabled && e.button === 0){
- this.getClickEl(e).addClass('x-btn-click');
- this.doc.on('mouseup', this.onMouseUp, this);
+ onMouseDown: function(e) {
+ var me = this;
+ if (!me.disabled && e.button === 0) {
+ me.addClsWithUI(me.pressedCls);
+ me.doc.on('mouseup', me.onMouseUp, me);
}
},
// private
- onMouseUp : function(e){
- if(e.button === 0){
- this.getClickEl(e, true).removeClass('x-btn-click');
- this.doc.un('mouseup', this.onMouseUp, this);
+ onMouseUp: function(e) {
+ var me = this;
+ if (e.button === 0) {
+ if (!me.pressed) {
+ me.removeClsWithUI(me.pressedCls);
+ }
+ me.doc.un('mouseup', me.onMouseUp, me);
}
},
// private
- onMenuShow : function(e){
- 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);
- }
+ onMenuShow: function(e) {
+ var me = this;
+ me.ignoreNextClick = 0;
+ me.addClsWithUI(me.menuActiveCls);
+ me.fireEvent('menushow', me, me.menu);
},
+
// private
- onMenuHide : function(e){
- 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;
- }
+ onMenuHide: function(e) {
+ var me = this;
+ me.removeClsWithUI(me.menuActiveCls);
+ me.ignoreNextClick = Ext.defer(me.restoreClick, 250, me);
+ me.fireEvent('menuhide', me, me.menu);
},
// private
- restoreClick : function(){
+ restoreClick: function() {
this.ignoreNextClick = 0;
- }
+ },
- /**
- * @cfg {String} autoEl @hide
- */
- /**
- * @cfg {String/Object} html @hide
- */
- /**
- * @cfg {String} contentEl @hide
- */
- /**
- * @cfg {Mixed} data @hide
- */
- /**
- * @cfg {Mixed} tpl @hide
+ // private
+ onDownKey: function() {
+ var me = this;
+
+ if (!me.disabled) {
+ if (me.menu) {
+ me.showMenu();
+ }
+ }
+ },
+
+ * @private
+ * Some browsers (notably Safari and older Chromes on Windows) add extra "padding" inside the button
+ * element that cannot be removed. This method returns the size of that padding with a one-time detection.
+ * @return {Number[]} [top, right, bottom, left]
*/
- /**
- * @cfg {String} tplWriteMode @hide
+ getPersistentBtnPadding: function() {
+ var cls = Ext.button.Button,
+ padding = cls.persistentPadding,
+ btn, leftTop, btnEl, btnInnerEl;
+
+ if (!padding) {
+ padding = cls.persistentPadding = [0, 0, 0, 0]; //set early to prevent recursion
+
+ if (!Ext.isIE) { //short-circuit IE as it sometimes gives false positive for padding
+ // Create auto-size button offscreen and measure its insides
+ btn = Ext.create('Ext.button.Button', {
+ renderTo: Ext.getBody(),
+ text: 'test',
+ style: 'position:absolute;top:-999px;'
+ });
+ btnEl = btn.btnEl;
+ btnInnerEl = btn.btnInnerEl;
+ btnEl.setSize(null, null); //clear any hard dimensions on the button el to see what it does naturally
+
+ leftTop = btnInnerEl.getOffsetsTo(btnEl);
+ padding[0] = leftTop[1];
+ padding[1] = btnEl.getWidth() - btnInnerEl.getWidth() - leftTop[0];
+ padding[2] = btnEl.getHeight() - btnInnerEl.getHeight() - leftTop[1];
+ padding[3] = leftTop[0];
+
+ btn.destroy();
+ }
+ }
+
+ return padding;
+ }
+
+}, function() {
+ var groups = {};
+
+ function toggleGroup(btn, state) {
+ var g, i, l;
+ if (state) {
+ g = groups[btn.toggleGroup];
+ for (i = 0, l = g.length; i < l; i++) {
+ if (g[i] !== btn) {
+ g[i].toggle(false);
+ }
+ }
+ }
+ }
+
+ /**
+ * Private utility class used by Button
+ * @hide
*/
+ Ext.ButtonToggleManager = {
+ register: function(btn) {
+ if (!btn.toggleGroup) {
+ return;
+ }
+ var group = groups[btn.toggleGroup];
+ if (!group) {
+ group = groups[btn.toggleGroup] = [];
+ }
+ group.push(btn);
+ btn.on('toggle', toggleGroup);
+ },
+
+ unregister: function(btn) {
+ if (!btn.toggleGroup) {
+ return;
+ }
+ var group = groups[btn.toggleGroup];
+ if (group) {
+ Ext.Array.remove(group, btn);
+ btn.un('toggle', toggleGroup);
+ }
+ },
+
+ /**
+ * Gets the pressed button in the passed group or null
+ * @param {String} group
+ * @return {Ext.button.Button}
+ */
+ getPressed: function(group) {
+ var g = groups[group],
+ i = 0,
+ len;
+ if (g) {
+ for (len = g.length; i < len; i++) {
+ if (g[i].pressed === true) {
+ return g[i];
+ }
+ }
+ }
+ return null;
+ }
+ };
});
-Ext.reg('button', Ext.Button);
-
-// Private utility class used by Button
-Ext.ButtonToggleMgr = function(){
- var groups = {};
-
- function toggleGroup(btn, state){
- if(state){
- var g = groups[btn.toggleGroup];
- for(var i = 0, l = g.length; i < l; i++){
- if(g[i] != btn){
- g[i].toggle(false);
- }
- }
- }
- }
-
- return {
- register : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(!g){
- g = groups[btn.toggleGroup] = [];
- }
- g.push(btn);
- btn.on('toggle', toggleGroup);
- },
-
- unregister : function(btn){
- if(!btn.toggleGroup){
- return;
- }
- var g = groups[btn.toggleGroup];
- if(g){
- g.remove(btn);
- btn.un('toggle', toggleGroup);
- }
- },
-
- /**
- * Gets the pressed button in the passed group or null
- * @param {String} group
- * @return Button
- */
- getPressed : function(group){
- var g = groups[group];
- if(g){
- for(var i = 0, len = g.length; i < len; i++){
- if(g[i].pressed === true){
- return g[i];
- }
- }
- }
- return null;
- }
- };
-}();
-
+
-
\ No newline at end of file
+