/**
- * @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 : Button
This Button.
- *
e : EventObject
The 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
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * @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,
- /**
- * 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
+ pressed: false,
+
+ /**
+ * @cfg {String} text
+ * The button text to be used as innerHTML (html tags are accepted).
*/
- /**
- * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
+ /**
+ * @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} allowDepress
- * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
+ /**
+ * @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.
*/
- /**
- * @cfg {Boolean} enableToggle
- * True to enable pressed/not pressed toggling (defaults to false)
+ /**
+ * @cfg {Number} minWidth
+ * The minimum width for this button (used to give a set of buttons a common width).
+ * See also {@link Ext.panel.Panel}.{@link Ext.panel.Panel#minButtonWidth minButtonWidth}.
*/
- enableToggle : false,
- /**
- * @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.
- *
+
+ /**
+ * @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=false]
+ * True to start hidden.
*/
- /**
- * @cfg {Mixed} menu
- * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
+
+ /**
+ * @cfg {Boolean} [disabled=true]
+ * True to start disabled.
*/
- /**
- * @cfg {String} menuAlign
- * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
+
+ /**
+ * @cfg {Boolean} [pressed=false]
+ * True to start pressed (only if enableToggle = true)
*/
- menuAlign : 'tl-bl?',
- /**
- * @cfg {String} overflowText If used in a {@link Ext.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} toggleGroup
+ * The group this toggle button is a member of (only 1 per group can be pressed)
*/
- /**
- * @cfg {String} iconCls
- * A css class which sets a background image to be used as the icon for this 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.
*/
- /**
- * @cfg {String} type
- * submit, reset or button - defaults to 'button'
+
+ /**
+ * @cfg {Number} tabIndex
+ * Set a DOM tabIndex for this button.
*/
- type : 'button',
- // private
- menuClassTarget : 'tr:nth(2)',
-
- /**
- * @cfg {String} clickEvent
- * The type of event to map to the button's event handler (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.
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
+ /**
+ * @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
+ * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
+ */
+ 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.
+ */
+
+ /**
+ * @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.
*/
- initComponent : function(){
- Ext.Button.superclass.initComponent.call(this);
+ maskOnDisable: false,
- this.addEvents(
- /**
- * @event click
+ // 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 object 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}