<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-button-Button'>/**
|
</span> * @docauthor Robert Dougan <rob@sencha.com>
|
*
|
* Create simple buttons with this component. Customisations include {@link #iconAlign aligned}
|
* {@link #iconCls icons}, {@link #cfg-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 #cfg-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.define('Ext.button.Button', {
|
|
/* Begin Definitions */
|
alias: 'widget.button',
|
extend: 'Ext.Component',
|
|
requires: [
|
'Ext.button.Manager',
|
'Ext.menu.Manager',
|
'Ext.util.ClickRepeater',
|
'Ext.layout.component.Button',
|
'Ext.util.TextMetrics',
|
'Ext.util.KeyMap'
|
],
|
|
mixins: {
|
queryable: 'Ext.Queryable'
|
},
|
|
alternateClassName: 'Ext.Button',
|
/* End Definitions */
|
|
<span id='Ext-button-Button-property-isAction'> /*
|
</span> * @property {Boolean} isAction
|
* `true` in this class to identify an object as an instantiated Button, or subclass thereof.
|
*/
|
isButton: true,
|
<span id='Ext-button-Button-cfg-componentLayout'> componentLayout: 'button',
|
</span>
|
<span id='Ext-button-Button-property-hidden'> /**
|
</span> * @property {Boolean} hidden
|
* True if this button is hidden.
|
* @readonly
|
*/
|
hidden: false,
|
|
<span id='Ext-button-Button-property-disabled'> /**
|
</span> * @property {Boolean} disabled
|
* True if this button is disabled.
|
* @readonly
|
*/
|
disabled: false,
|
|
<span id='Ext-button-Button-property-pressed'> /**
|
</span> * @property {Boolean} pressed
|
* True if this button is pressed (only if enableToggle = true).
|
* @readonly
|
*/
|
pressed: false,
|
|
<span id='Ext-button-Button-cfg-text'> /**
|
</span> * @cfg {String} text
|
* The button text to be used as innerHTML (html tags are accepted).
|
*/
|
|
<span id='Ext-button-Button-cfg-icon'> /**
|
</span> * @cfg {String} icon
|
* The path to an image to display in the button.
|
*/
|
|
<span id='Ext-button-Button-cfg-handler'> /**
|
</span> * @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.
|
*/
|
|
<span id='Ext-button-Button-cfg-minWidth'> /**
|
</span> * @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}.
|
*/
|
|
<span id='Ext-button-Button-cfg-tooltip'> /**
|
</span> * @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.
|
*/
|
|
<span id='Ext-button-Button-cfg-hidden'> /**
|
</span> * @cfg {Boolean} [hidden=false]
|
* True to start hidden.
|
*/
|
|
<span id='Ext-button-Button-cfg-disabled'> /**
|
</span> * @cfg {Boolean} [disabled=false]
|
* True to start disabled.
|
*/
|
|
<span id='Ext-button-Button-cfg-pressed'> /**
|
</span> * @cfg {Boolean} [pressed=false]
|
* True to start pressed (only if enableToggle = true)
|
*/
|
|
<span id='Ext-button-Button-cfg-toggleGroup'> /**
|
</span> * @cfg {String} toggleGroup
|
* The group this toggle button is a member of (only 1 per group can be pressed). If a toggleGroup
|
* is specified, the {@link #enableToggle} configuration will automatically be set to true.
|
*/
|
|
<span id='Ext-button-Button-cfg-repeat'> /**
|
</span> * @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.
|
*/
|
|
<span id='Ext-button-Button-cfg-tabIndex'> /**
|
</span> * @cfg {Number} tabIndex
|
* Set a DOM tabIndex for this button.
|
*/
|
tabIndex: 0,
|
|
<span id='Ext-button-Button-cfg-allowDepress'> /**
|
</span> * @cfg {Boolean} [allowDepress=true]
|
* False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true.
|
*/
|
|
<span id='Ext-button-Button-cfg-enableToggle'> /**
|
</span> * @cfg {Boolean} [enableToggle=false]
|
* True to enable pressed/not pressed toggling. If a {@link #toggleGroup} is specified, this
|
* option will be set to true.
|
*/
|
enableToggle: false,
|
|
<span id='Ext-button-Button-cfg-toggleHandler'> /**
|
</span> * @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.
|
*/
|
|
<span id='Ext-button-Button-cfg-menu'> /**
|
</span> * @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.
|
*/
|
|
<span id='Ext-button-Button-cfg-menuAlign'> /**
|
</span> * @cfg {String} menuAlign
|
* The position to align the menu to (see {@link Ext.util.Positionable#alignTo} for more details).
|
*/
|
menuAlign: 'tl-bl?',
|
|
<span id='Ext-button-Button-cfg-showEmptyMenu'> /**
|
</span> * @cfg {Boolean} showEmptyMenu
|
* True to force an attached {@link #cfg-menu} with no items to be shown when clicking
|
* this button. By default, the menu will not show if it is empty.
|
*/
|
showEmptyMenu: false,
|
|
<span id='Ext-button-Button-cfg-textAlign'> /**
|
</span> * @cfg {String} textAlign
|
* The text alignment for this button (center, left, right).
|
*/
|
textAlign: 'center',
|
|
<span id='Ext-button-Button-cfg-overflowText'> /**
|
</span> * @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}`.
|
*/
|
|
<span id='Ext-button-Button-cfg-iconCls'> /**
|
</span> * @cfg {String} iconCls
|
* A css class which sets a background image to be used as the icon for this button.
|
*/
|
|
<span id='Ext-button-Button-cfg-glyph'> /**
|
</span> * @cfg {Number/String} glyph
|
* A numeric unicode character code to use as the icon for this button. The default
|
* font-family for glyphs can be set globally using
|
* {@link Ext#setGlyphFontFamily Ext.setGlyphFontFamily()}. Alternatively, this
|
* config option accepts a string with the charCode and font-family separated by the
|
* `@` symbol. For example '65@My Font Family'.
|
*/
|
|
<span id='Ext-button-Button-cfg-clickEvent'> /**
|
</span> * @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',
|
|
<span id='Ext-button-Button-cfg-preventDefault'> /**
|
</span> * @cfg {Boolean} preventDefault
|
* True to prevent the default action when the {@link #clickEvent} is processed.
|
*/
|
preventDefault: true,
|
|
<span id='Ext-button-Button-cfg-handleMouseEvents'> /**
|
</span> * @cfg {Boolean} handleMouseEvents
|
* False to disable visual cues on mouseover, mouseout and mousedown.
|
*/
|
handleMouseEvents: true,
|
|
<span id='Ext-button-Button-cfg-tooltipType'> /**
|
</span> * @cfg {String} tooltipType
|
* The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute.
|
*/
|
tooltipType: 'qtip',
|
|
<span id='Ext-button-Button-cfg-baseCls'> /**
|
</span> * @cfg {String} [baseCls='x-btn']
|
* The base CSS class to add to all buttons.
|
*/
|
baseCls: Ext.baseCSSPrefix + 'btn',
|
|
<span id='Ext-button-Button-cfg-pressedCls'> /**
|
</span> * @cfg {String} pressedCls
|
* The CSS class to add to a button when it is in the pressed state.
|
*/
|
pressedCls: 'pressed',
|
|
<span id='Ext-button-Button-cfg-overCls'> /**
|
</span> * @cfg {String} overCls
|
* The CSS class to add to a button when it is in the over (hovered) state.
|
*/
|
overCls: 'over',
|
|
<span id='Ext-button-Button-cfg-focusCls'> /**
|
</span> * @cfg {String} focusCls
|
* The CSS class to add to a button when it is in the focussed state.
|
*/
|
focusCls: 'focus',
|
|
<span id='Ext-button-Button-cfg-menuActiveCls'> /**
|
</span> * @cfg {String} menuActiveCls
|
* The CSS class to add to a button when it's menu is active.
|
*/
|
menuActiveCls: 'menu-active',
|
|
<span id='Ext-button-Button-cfg-href'> /**
|
</span> * @cfg {String} href
|
* The URL to open when the button is clicked. Specifying this config causes the Button to be
|
* rendered with the specified URL as the `href` attribute of its `<a>` Element.
|
*
|
* This is better than specifying a click handler of
|
*
|
* function() { window.location = "http://www.sencha.com" }
|
*
|
* because the UI will provide meaningful hints to the user as to what to expect upon clicking
|
* the button, and will also allow the user to open in a new tab or window, bookmark or drag the URL, or directly save
|
* the URL stream to disk.
|
*
|
* See also the {@link #hrefTarget} config.
|
*/
|
|
<span id='Ext-button-Button-cfg-hrefTarget'> /**
|
</span> * @cfg {String} [hrefTarget="_blank"]
|
* The target attribute to use for the underlying anchor. Only used if the {@link #href}
|
* property is specified.
|
*/
|
hrefTarget: '_blank',
|
|
<span id='Ext-button-Button-cfg-destroyMenu'> /**
|
</span> * @cfg {Boolean} destroyMenu
|
* Whether or not to destroy any associated menu when this button is destroyed. The menu
|
* will be destroyed unless this is explicitly set to false.
|
*/
|
|
<span id='Ext-button-Button-cfg-baseParams'> /**
|
</span> * @cfg {Object} baseParams
|
* An object literal of parameters to pass to the url when the {@link #href} property is specified.
|
*/
|
|
<span id='Ext-button-Button-cfg-params'> /**
|
</span> * @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.
|
*/
|
|
childEls: [
|
'btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl'
|
],
|
|
<span id='Ext-button-Button-cfg-renderTpl'> // We have to keep "unselectable" attribute on all elements because it's not inheritable.
|
</span> // Without it, clicking anywhere on a button disrupts current selection and cursor position
|
// in HtmlEditor.
|
renderTpl: [
|
'<span id="{id}-btnWrap" class="{baseCls}-wrap',
|
'<tpl if="splitCls"> {splitCls}</tpl>',
|
'{childElCls}" unselectable="on">',
|
'<span id="{id}-btnEl" class="{baseCls}-button">',
|
'<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}',
|
'{childElCls}" unselectable="on">',
|
'{text}',
|
'</span>',
|
'<span role="img" id="{id}-btnIconEl" class="{baseCls}-icon-el {iconCls}',
|
'{childElCls} {glyphCls}" unselectable="on" style="',
|
'<tpl if="iconUrl">background-image:url({iconUrl});</tpl>',
|
'<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
|
'<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl">&#160;</tpl>',
|
'</span>',
|
'</span>',
|
'</span>',
|
// if "closable" (tab) add a close element icon
|
'<tpl if="closable">',
|
'<span id="{id}-closeEl" class="{baseCls}-close-btn" title="{closeText}" tabIndex="0"></span>',
|
'</tpl>'
|
],
|
|
<span id='Ext-button-Button-cfg-scale'> /**
|
</span> * @cfg {"small"/"medium"/"large"} 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',
|
|
<span id='Ext-button-Button-property-allowedScales'> /**
|
</span> * @private
|
* An array of allowed scales.
|
*/
|
allowedScales: ['small', 'medium', 'large'],
|
|
<span id='Ext-button-Button-cfg-scope'> /**
|
</span> * @cfg {Object} scope
|
* The scope (**this** reference) in which the `{@link #handler}` and `{@link #toggleHandler}` is executed.
|
* Defaults to this Button.
|
*/
|
|
<span id='Ext-button-Button-cfg-iconAlign'> /**
|
</span> * @cfg {String} iconAlign
|
* The side of the Button box to render the icon. Four values are allowed:
|
*
|
* - 'top'
|
* - 'right'
|
* - 'bottom'
|
* - 'left'
|
*/
|
iconAlign: 'left',
|
|
<span id='Ext-button-Button-cfg-arrowAlign'> /**
|
</span> * @cfg {String} arrowAlign
|
* The side of the Button box to render the arrow if the button has an associated {@link #cfg-menu}. Two
|
* values are allowed:
|
*
|
* - 'right'
|
* - 'bottom'
|
*/
|
arrowAlign: 'right',
|
|
<span id='Ext-button-Button-cfg-arrowCls'> /**
|
</span> * @cfg {String} arrowCls
|
* The className used for the inner arrow element if the button has a menu.
|
*/
|
arrowCls: 'arrow',
|
|
<span id='Ext-button-Button-property-template'> /**
|
</span> * @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}.
|
*/
|
|
<span id='Ext-button-Button-cfg-cls'> /**
|
</span> * @cfg {String} cls
|
* A CSS class string to apply to the button's main element.
|
*/
|
|
<span id='Ext-button-Button-property-menu'> /**
|
</span> * @property {Ext.menu.Menu} menu
|
* The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #cfg-menu} config
|
* option.
|
*/
|
|
maskOnDisable: false,
|
|
<span id='Ext-button-Button-cfg-shrinkWrap'> shrinkWrap: 3,
|
</span>
|
<span id='Ext-button-Button-cfg-frame'> frame: true,
|
</span>
|
<span id='Ext-button-Button-property-_triggerRegion'> // A reusable object used by getTriggerRegion to avoid excessive object creation.
|
</span> _triggerRegion: {},
|
|
<span id='Ext-button-Button-method-initComponent'> // inherit docs
|
</span> initComponent: function() {
|
var me = this;
|
|
// the autoEl object can't be on the prototype because we add tabIndex and href
|
// properties to it conditionally.
|
me.autoEl = {
|
tag: 'a',
|
role: 'button',
|
hidefocus: 'on',
|
unselectable: 'on'
|
};
|
|
// Ensure no selection happens
|
me.addCls('x-unselectable');
|
|
me.callParent(arguments);
|
|
me.addEvents(
|
<span id='Ext-button-Button-event-click'> /**
|
</span> * @event click
|
* Fires when this button is clicked, before the configured {@link #handler} is invoked. Execution of the
|
* {@link #handler} may be vetoed by returning <code>false</code> to this event.
|
* @param {Ext.button.Button} this
|
* @param {Event} e The click event
|
*/
|
'click',
|
|
<span id='Ext-button-Button-event-toggle'> /**
|
</span> * @event toggle
|
* Fires when the 'pressed' state of this button changes (only if enableToggle = true)
|
* @param {Ext.button.Button} this
|
* @param {Boolean} pressed
|
*/
|
'toggle',
|
|
<span id='Ext-button-Button-event-mouseover'> /**
|
</span> * @event mouseover
|
* Fires when the mouse hovers over the button
|
* @param {Ext.button.Button} this
|
* @param {Event} e The event object
|
*/
|
'mouseover',
|
|
<span id='Ext-button-Button-event-mouseout'> /**
|
</span> * @event mouseout
|
* Fires when the mouse exits the button
|
* @param {Ext.button.Button} this
|
* @param {Event} e The event object
|
*/
|
'mouseout',
|
|
<span id='Ext-button-Button-event-menushow'> /**
|
</span> * @event menushow
|
* If this button has a menu, this event fires when it is shown
|
* @param {Ext.button.Button} this
|
* @param {Ext.menu.Menu} menu
|
*/
|
'menushow',
|
|
<span id='Ext-button-Button-event-menuhide'> /**
|
</span> * @event menuhide
|
* If this button has a menu, this event fires when it is hidden
|
* @param {Ext.button.Button} this
|
* @param {Ext.menu.Menu} menu
|
*/
|
'menuhide',
|
|
<span id='Ext-button-Button-event-menutriggerover'> /**
|
</span> * @event menutriggerover
|
* If this button has a menu, this event fires when the mouse enters the menu triggering element
|
* @param {Ext.button.Button} this
|
* @param {Ext.menu.Menu} menu
|
* @param {Event} e
|
*/
|
'menutriggerover',
|
|
<span id='Ext-button-Button-event-menutriggerout'> /**
|
</span> * @event menutriggerout
|
* If this button has a menu, this event fires when the mouse leaves the menu triggering element
|
* @param {Ext.button.Button} this
|
* @param {Ext.menu.Menu} menu
|
* @param {Event} e
|
*/
|
'menutriggerout',
|
|
<span id='Ext-button-Button-event-textchange'> /**
|
</span> * @event textchange
|
* Fired when the button's text is changed by the {@link #setText} method.
|
* @param {Ext.button.Button} this
|
* @param {String} oldText
|
* @param {String} newText
|
*/
|
'textchange',
|
|
<span id='Ext-button-Button-event-iconchange'> /**
|
</span> * @event iconchange
|
* Fired when the button's icon is changed by the {@link #setIcon} or {@link #setIconCls} methods.
|
* @param {Ext.button.Button} this
|
* @param {String} oldIcon
|
* @param {String} newIcon
|
*/
|
'iconchange',
|
|
<span id='Ext-button-Button-event-glyphchange'> /**
|
</span> * @event glyphchange
|
* Fired when the button's glyph is changed by the {@link #setGlyph} method.
|
* @param {Ext.button.Button} this
|
* @param {Number/String} newGlyph
|
* @param {Number/String} oldGlyph
|
*/
|
'glyphchange'
|
);
|
|
if (me.menu) {
|
// Flag that we'll have a splitCls
|
me.split = true;
|
|
// retrieve menu by id or instantiate instance if needed
|
me.menu = Ext.menu.Manager.get(me.menu);
|
|
// Use ownerButton as the upward link. Menus *must have no ownerCt* - they are global floaters.
|
// Upward navigation is done using the up() method.
|
me.menu.ownerButton = me;
|
}
|
|
// Accept url as a synonym for href
|
if (me.url) {
|
me.href = me.url;
|
}
|
|
// preventDefault defaults to false for links
|
if (me.href && !me.hasOwnProperty('preventDefault')) {
|
me.preventDefault = false;
|
}
|
|
if (Ext.isString(me.toggleGroup) && me.toggleGroup !== '') {
|
me.enableToggle = true;
|
}
|
|
if (me.html && !me.text) {
|
me.text = me.html;
|
delete me.html;
|
}
|
|
me.glyphCls = me.baseCls + '-glyph';
|
},
|
|
<span id='Ext-button-Button-method-getActionEl'> // inherit docs
|
</span> getActionEl: function() {
|
return this.el;
|
},
|
|
<span id='Ext-button-Button-method-getFocusEl'> // inherit docs
|
</span> getFocusEl: function() {
|
return this.el;
|
},
|
|
<span id='Ext-button-Button-method-onDisable'> // See comments in onFocus
|
</span> onDisable: function(){
|
this.callParent(arguments);
|
},
|
|
<span id='Ext-button-Button-method-setComponentCls'> // @private
|
</span> setComponentCls: function() {
|
var me = this,
|
cls = me.getComponentCls();
|
|
if (!Ext.isEmpty(me.oldCls)) {
|
me.removeClsWithUI(me.oldCls);
|
me.removeClsWithUI(me.pressedCls);
|
}
|
|
me.oldCls = cls;
|
me.addClsWithUI(cls);
|
},
|
|
<span id='Ext-button-Button-method-getComponentCls'> getComponentCls: function() {
|
</span> var me = this,
|
cls;
|
|
// Check whether the button has an icon or not, and if it has an icon, what is the alignment
|
if (me.iconCls || me.icon || me.glyph) {
|
cls = [me.text ? 'icon-text-' + me.iconAlign : 'icon'];
|
} else if (me.text) {
|
cls = ['noicon'];
|
} else {
|
cls = [];
|
}
|
|
if (me.pressed) {
|
cls[cls.length] = me.pressedCls;
|
}
|
return cls;
|
},
|
|
<span id='Ext-button-Button-method-beforeRender'> beforeRender: function () {
|
</span> var me = this,
|
autoEl = me.autoEl,
|
href = me.getHref(),
|
hrefTarget = me.hrefTarget;
|
|
if (!me.disabled) {
|
autoEl.tabIndex = me.tabIndex;
|
}
|
|
if (href) {
|
autoEl.href = href;
|
if (hrefTarget) {
|
autoEl.target = hrefTarget;
|
}
|
}
|
|
me.callParent();
|
|
// Add all needed classes to the protoElement.
|
me.oldCls = me.getComponentCls();
|
me.addClsWithUI(me.oldCls);
|
|
// Apply the renderData to the template args
|
Ext.applyIf(me.renderData, me.getTemplateArgs());
|
},
|
|
<span id='Ext-button-Button-method-onRender'> // @private
|
</span> onRender: function() {
|
var me = this,
|
addOnclick,
|
btn,
|
btnListeners;
|
|
me.doc = Ext.getDoc();
|
me.callParent(arguments);
|
|
// Set btn as a local variable for easy access
|
btn = me.el;
|
|
if (me.tooltip) {
|
me.setTooltip(me.tooltip, true);
|
}
|
|
// Add the mouse events to the button
|
if (me.handleMouseEvents) {
|
btnListeners = {
|
scope: me,
|
mouseover: me.onMouseOver,
|
mouseout: me.onMouseOut,
|
mousedown: me.onMouseDown
|
};
|
if (me.split) {
|
btnListeners.mousemove = me.onMouseMove;
|
}
|
} else {
|
btnListeners = {
|
scope: me
|
};
|
}
|
|
// Check if the button has a menu
|
if (me.menu) {
|
me.mon(me.menu, {
|
scope: me,
|
show: me.onMenuShow,
|
hide: me.onMenuHide
|
});
|
|
me.keyMap = new Ext.util.KeyMap({
|
target: me.el,
|
key: Ext.EventObject.DOWN,
|
handler: me.onDownKey,
|
scope: me
|
});
|
}
|
|
// Check if it is a repeat button
|
if (me.repeat) {
|
me.mon(new Ext.util.ClickRepeater(btn, Ext.isObject(me.repeat) ? me.repeat: {}), 'click', me.onRepeatClick, me);
|
} else {
|
|
// If the activation event already has a handler, make a note to add the handler later
|
if (btnListeners[me.clickEvent]) {
|
addOnclick = true;
|
} else {
|
btnListeners[me.clickEvent] = me.onClick;
|
}
|
}
|
|
// Add whatever button listeners we need
|
me.mon(btn, btnListeners);
|
|
// If the listeners object had an entry for our clickEvent, add a listener now
|
if (addOnclick) {
|
me.mon(btn, me.clickEvent, me.onClick, me);
|
}
|
|
Ext.button.Manager.register(me);
|
},
|
|
<span id='Ext-button-Button-method-getTemplateArgs'> /**
|
</span> * This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} 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.
|
* @protected
|
*
|
* @return {Object} Substitution data for a Template. The default implementation which provides data for the default
|
* {@link #template} returns an Object containing the following properties:
|
* @return {String} return.innerCls A CSS class to apply to the button's text element.
|
* @return {String} return.splitCls A CSS class to determine the presence and position of an arrow icon.
|
* (`'x-btn-arrow'` or `'x-btn-arrow-bottom'` or `''`)
|
* @return {String} return.iconUrl The url for the button icon.
|
* @return {String} return.iconCls The CSS class for the button icon.
|
* @return {String} return.glyph The glyph to use as the button icon.
|
* @return {String} return.glyphCls The CSS class to use for the glyph element.
|
* @return {String} return.glyphFontFamily The CSS font-family to use for the glyph element.
|
* @return {String} return.text The {@link #text} to display ion the Button.
|
*/
|
getTemplateArgs: function() {
|
var me = this,
|
glyph = me.glyph,
|
glyphFontFamily = Ext._glyphFontFamily,
|
glyphParts;
|
|
if (typeof glyph === 'string') {
|
glyphParts = glyph.split('@');
|
glyph = glyphParts[0];
|
glyphFontFamily = glyphParts[1];
|
}
|
|
return {
|
innerCls : me.getInnerCls(),
|
splitCls : me.getSplitCls(),
|
iconUrl : me.icon,
|
iconCls : me.iconCls,
|
glyph: glyph,
|
glyphCls: glyph ? me.glyphCls : '',
|
glyphFontFamily: glyphFontFamily,
|
text : me.text || '&#160;'
|
};
|
},
|
|
<span id='Ext-button-Button-method-setHref'> /**
|
</span> * Sets the href of the embedded anchor element to the passed URL.
|
*
|
* Also appends any configured {@link #cfg-baseParams} and parameters set through {@link #setParams}.
|
* @param {String} href The URL to set in the anchor element.
|
*
|
*/
|
setHref: function(href) {
|
this.href = href;
|
this.el.dom.href = this.getHref();
|
},
|
|
<span id='Ext-button-Button-method-getHref'> /**
|
</span> * @private
|
* If there is a configured href for this Button, returns the href with parameters appended.
|
* @return {String/Boolean} The href string with parameters appended.
|
*/
|
getHref: function() {
|
var me = this,
|
href = me.href;
|
|
return href ? Ext.urlAppend(href, Ext.Object.toQueryString(Ext.apply({}, me.params, me.baseParams))) : false;
|
},
|
|
<span id='Ext-button-Button-method-setParams'> /**
|
</span> * Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.
|
*
|
* **Only valid if the Button was originally configured with a {@link #href}**
|
*
|
* @param {Object} params Parameters to use in the href URL.
|
*/
|
setParams: function(params) {
|
this.params = params;
|
this.el.dom.href = this.getHref();
|
},
|
|
<span id='Ext-button-Button-method-getSplitCls'> getSplitCls: function() {
|
</span> var me = this;
|
return me.split ? (me.baseCls + '-' + me.arrowCls) + ' ' + (me.baseCls + '-' + me.arrowCls + '-' + me.arrowAlign) : '';
|
},
|
|
<span id='Ext-button-Button-method-getInnerCls'> getInnerCls: function() {
|
</span> return this.textAlign ? this.baseCls + '-inner-' + this.textAlign : '';
|
},
|
|
<span id='Ext-button-Button-method-setIcon'> /**
|
</span> * 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.Button} this
|
*/
|
setIcon: function(icon) {
|
icon = icon || '';
|
var me = this,
|
btnIconEl = me.btnIconEl,
|
oldIcon = me.icon || '';
|
|
me.icon = icon;
|
if (icon != oldIcon) {
|
if (btnIconEl) {
|
btnIconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
|
me.setComponentCls();
|
if (me.didIconStateChange(oldIcon, icon)) {
|
me.updateLayout();
|
}
|
}
|
me.fireEvent('iconchange', me, oldIcon, icon);
|
}
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-setIconCls'> /**
|
</span> * Sets the CSS class that provides a background image to use as the button's icon. This method also changes the
|
* value of the {@link #iconCls} config internally.
|
* @param {String} cls The CSS class providing the icon image
|
* @return {Ext.button.Button} this
|
*/
|
setIconCls: function(cls) {
|
cls = cls || '';
|
var me = this,
|
btnIconEl = me.btnIconEl,
|
oldCls = me.iconCls || '';
|
|
me.iconCls = cls;
|
if (oldCls != cls) {
|
if (btnIconEl) {
|
// Remove the previous iconCls from the button
|
btnIconEl.removeCls(oldCls);
|
btnIconEl.addCls(cls);
|
me.setComponentCls();
|
if (me.didIconStateChange(oldCls, cls)) {
|
me.updateLayout();
|
}
|
}
|
me.fireEvent('iconchange', me, oldCls, cls);
|
}
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-setGlyph'> /**
|
</span> * Sets this button's glyph
|
* @param {Number/String} glyph the numeric charCode or string charCode/font-family.
|
* This parameter expects a format consistent with that of {@link #glyph}
|
* @return {Ext.button.Button} this
|
*/
|
setGlyph: function(glyph) {
|
glyph = glyph || 0;
|
var me = this,
|
btnIconEl = me.btnIconEl,
|
oldGlyph = me.glyph,
|
fontFamily, glyphParts;
|
|
me.glyph = glyph;
|
|
if (btnIconEl) {
|
if (typeof glyph === 'string') {
|
glyphParts = glyph.split('@');
|
glyph = glyphParts[0];
|
fontFamily = glyphParts[1] || Ext._glyphFontFamily;
|
}
|
|
if (!glyph) {
|
btnIconEl.dom.innerHTML = '';
|
} else if (oldGlyph != glyph) {
|
btnIconEl.dom.innerHTML = '&#' + glyph + ';';
|
}
|
|
if (fontFamily) {
|
btnIconEl.setStyle('font-family', fontFamily);
|
}
|
}
|
|
me.fireEvent('glyphchange', me, me.glyph, oldGlyph);
|
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-setTooltip'> /**
|
</span> * Sets the tooltip for this Button.
|
*
|
* @param {String/Object} tooltip This may be:
|
*
|
* - **String** : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
|
* - **Object** : A configuration object for {@link Ext.tip.QuickTipManager#register}.
|
*
|
* @return {Ext.button.Button} this
|
*/
|
setTooltip: function(tooltip, initial) {
|
var me = this;
|
|
if (me.rendered) {
|
if (!initial || !tooltip) {
|
me.clearTip();
|
}
|
if (tooltip) {
|
if (Ext.quickTipsActive && Ext.isObject(tooltip)) {
|
Ext.tip.QuickTipManager.register(Ext.apply({
|
target: me.el.id
|
},
|
tooltip));
|
me.tooltip = tooltip;
|
} else {
|
me.el.dom.setAttribute(me.getTipAttr(), tooltip);
|
}
|
}
|
} else {
|
me.tooltip = tooltip;
|
}
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-setTextAlign'> /**
|
</span> * Sets the text alignment for this button.
|
* @param {String} align The new alignment of the button text. See {@link #textAlign}.
|
*/
|
setTextAlign: function(align) {
|
var me = this,
|
btnEl = me.btnEl;
|
|
if (btnEl) {
|
btnEl.removeCls(me.baseCls + '-inner-' + me.textAlign);
|
btnEl.addCls(me.baseCls + '-inner-' + align);
|
}
|
me.textAlign = align;
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-getTipAttr'> getTipAttr: function(){
|
</span> return this.tooltipType == 'qtip' ? 'data-qtip' : 'title';
|
},
|
|
<span id='Ext-button-Button-method-getRefItems'> // @private
|
</span> getRefItems: function(deep){
|
var menu = this.menu,
|
items;
|
|
if (menu) {
|
items = menu.getRefItems(deep);
|
items.unshift(menu);
|
}
|
return items || [];
|
},
|
|
<span id='Ext-button-Button-method-clearTip'> // @private
|
</span> clearTip: function() {
|
var me = this,
|
el = me.el;
|
|
if (Ext.quickTipsActive && Ext.isObject(me.tooltip)) {
|
Ext.tip.QuickTipManager.unregister(el);
|
} else {
|
el.dom.removeAttribute(me.getTipAttr());
|
}
|
},
|
|
<span id='Ext-button-Button-method-beforeDestroy'> // @private
|
</span> beforeDestroy: function() {
|
var me = this;
|
if (me.rendered) {
|
me.clearTip();
|
}
|
if (me.menu && me.destroyMenu !== false) {
|
Ext.destroy(me.menu);
|
}
|
Ext.destroy(me.btnInnerEl, me.repeater);
|
me.callParent();
|
},
|
|
<span id='Ext-button-Button-method-onDestroy'> // @private
|
</span> onDestroy: function() {
|
var me = this;
|
if (me.rendered) {
|
me.doc.un('mouseover', me.monitorMouseOver, me);
|
delete me.doc;
|
|
Ext.destroy(me.keyMap);
|
delete me.keyMap;
|
}
|
Ext.button.Manager.unregister(me);
|
me.callParent();
|
},
|
|
<span id='Ext-button-Button-method-setHandler'> /**
|
</span> * Assigns this Button's click handler
|
* @param {Function} handler The function to call when the button is clicked
|
* @param {Object} [scope] The scope (`this` reference) in which the handler function is executed.
|
* Defaults to this Button.
|
* @return {Ext.button.Button} this
|
*/
|
setHandler: function(handler, scope) {
|
this.handler = handler;
|
this.scope = scope;
|
return this;
|
},
|
|
<span id='Ext-button-Button-method-setText'> /**
|
</span> * Sets this Button's text
|
* @param {String} text The button text
|
* @return {Ext.button.Button} this
|
*/
|
setText: function(text) {
|
text = text || '';
|
var me = this,
|
oldText = me.text || '';
|
|
if (text != oldText) {
|
me.text = text;
|
if (me.rendered) {
|
me.btnInnerEl.update(text || '&#160;');
|
me.setComponentCls();
|
if (Ext.isStrict && Ext.isIE8) {
|
// weird repaint issue causes it to not resize
|
me.el.repaint();
|
}
|
me.updateLayout();
|
}
|
me.fireEvent('textchange', me, oldText, text);
|
}
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-didIconStateChange'> /**
|
</span> * Checks if the icon/iconCls changed from being empty to having a value, or having a value to being empty.
|
* @private
|
* @param {String} old The old icon/iconCls
|
* @param {String} current The current icon/iconCls
|
* @return {Boolean} True if the icon state changed
|
*/
|
didIconStateChange: function(old, current) {
|
var currentEmpty = Ext.isEmpty(current);
|
return Ext.isEmpty(old) ? !currentEmpty : currentEmpty;
|
},
|
|
<span id='Ext-button-Button-method-getText'> /**
|
</span> * Gets the text for this Button
|
* @return {String} The button text
|
*/
|
getText: function() {
|
return this.text;
|
},
|
|
<span id='Ext-button-Button-method-toggle'> /**
|
</span> * 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) {
|
var me = this;
|
state = state === undefined ? !me.pressed: !!state;
|
if (state !== me.pressed) {
|
if (me.rendered) {
|
me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls);
|
}
|
me.pressed = state;
|
if (!suppressEvent) {
|
me.fireEvent('toggle', me, state);
|
Ext.callback(me.toggleHandler, me.scope || me, [me, state]);
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-maybeShowMenu'> maybeShowMenu: function(){
|
</span> var me = this;
|
if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) {
|
me.showMenu(true);
|
}
|
},
|
|
<span id='Ext-button-Button-method-showMenu'> /**
|
</span> * Shows this button's menu (if it has one)
|
*/
|
showMenu: function(/* private */ fromEvent) {
|
var me = this,
|
menu = me.menu;
|
|
if (me.rendered) {
|
if (me.tooltip && Ext.quickTipsActive && me.getTipAttr() != 'title') {
|
Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.el);
|
}
|
if (menu.isVisible()) {
|
menu.hide();
|
}
|
|
if (!fromEvent || me.showEmptyMenu || menu.items.getCount() > 0) {
|
menu.showBy(me.el, me.menuAlign);
|
}
|
}
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-hideMenu'> /**
|
</span> * Hides this button's menu (if it has one)
|
*/
|
hideMenu: function() {
|
if (this.hasVisibleMenu()) {
|
this.menu.hide();
|
}
|
return this;
|
},
|
|
<span id='Ext-button-Button-method-hasVisibleMenu'> /**
|
</span> * Returns true if the button has a menu and it is visible
|
* @return {Boolean}
|
*/
|
hasVisibleMenu: function() {
|
var menu = this.menu;
|
return menu && menu.rendered && menu.isVisible();
|
},
|
|
<span id='Ext-button-Button-method-onRepeatClick'> // @private
|
</span> onRepeatClick: function(repeat, e) {
|
this.onClick(e);
|
},
|
|
<span id='Ext-button-Button-method-onClick'> // @private
|
</span> onClick: function(e) {
|
var me = this;
|
if (me.preventDefault || (me.disabled && me.getHref()) && e) {
|
e.preventDefault();
|
}
|
|
// Can be triggered by ENTER or SPACE keydown events which set the button property.
|
// Only veto event handling if it's a mouse event with an alternative button.
|
if (e.type !== 'keydown' && e.button !== 0) {
|
return;
|
}
|
if (!me.disabled) {
|
me.doToggle();
|
me.maybeShowMenu();
|
me.fireHandler(e);
|
}
|
},
|
|
<span id='Ext-button-Button-method-fireHandler'> fireHandler: function(e) {
|
</span> var me = this,
|
handler = me.handler;
|
|
if (me.fireEvent('click', me, e) !== false) {
|
if (handler) {
|
handler.call(me.scope || me, me, e);
|
}
|
}
|
},
|
|
<span id='Ext-button-Button-method-doToggle'> doToggle: function() {
|
</span> var me = this;
|
if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
|
me.toggle();
|
}
|
},
|
|
<span id='Ext-button-Button-method-onMouseOver'> /**
|
</span> * @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);
|
}
|
},
|
|
<span id='Ext-button-Button-method-onMouseOut'> /**
|
</span> * @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);
|
}
|
},
|
|
<span id='Ext-button-Button-method-onMouseMove'> /**
|
</span> * @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,
|
overPosition, triggerRegion;
|
|
if (me.split) {
|
overPosition = (me.arrowAlign === 'right') ?
|
e.getX() - me.getX() : e.getY() - el.getY();
|
triggerRegion = me.getTriggerRegion();
|
|
if (overPosition > triggerRegion.begin && overPosition < triggerRegion.end) {
|
if (!over) {
|
me.onMenuTriggerOver(e);
|
}
|
} else {
|
if (over) {
|
me.onMenuTriggerOut(e);
|
}
|
}
|
}
|
},
|
|
<span id='Ext-button-Button-method-getTriggerRegion'> /**
|
</span> * @private
|
* Returns an object containing `begin` and `end` properties that indicate the
|
* left/right bounds of a right trigger or the top/bottom bounds of a bottom trigger.
|
* @return {Object}
|
*/
|
getTriggerRegion: function() {
|
var me = this,
|
region = me._triggerRegion,
|
triggerSize = me.getTriggerSize(),
|
btnSize = me.arrowAlign === 'right' ? me.getWidth() : me.getHeight();
|
|
region.begin = btnSize - triggerSize;
|
region.end = btnSize;
|
return region;
|
},
|
|
<span id='Ext-button-Button-method-getTriggerSize'> /**
|
</span> * @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;
|
|
if (size == null) { // Same as (size === null || size === undefined)
|
side = me.arrowAlign;
|
sideFirstLetter = side.charAt(0);
|
size = me.triggerSize = me.el.getFrameWidth(sideFirstLetter) + me.getBtnWrapFrameWidth(sideFirstLetter)
|
if (me.frameSize) {
|
size = me.triggerSize += me.frameSize[side];
|
}
|
}
|
return size;
|
},
|
|
<span id='Ext-button-Button-method-getBtnWrapFrameWidth'> /**
|
</span> * @private
|
*/
|
getBtnWrapFrameWidth: function(side) {
|
return this.btnWrap.getFrameWidth(side);
|
},
|
|
<span id='Ext-button-Button-method-addOverCls'> addOverCls: function() {
|
</span> if (!this.disabled) {
|
this.addClsWithUI(this.overCls);
|
}
|
},
|
<span id='Ext-button-Button-method-removeOverCls'> removeOverCls: function() {
|
</span> this.removeClsWithUI(this.overCls);
|
},
|
|
<span id='Ext-button-Button-method-onMouseEnter'> /**
|
</span> * @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) {
|
// overCls is handled by AbstractComponent
|
this.fireEvent('mouseover', this, e);
|
},
|
|
<span id='Ext-button-Button-method-onMouseLeave'> /**
|
</span> * @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) {
|
// overCls is handled by AbstractComponent
|
this.fireEvent('mouseout', this, e);
|
},
|
|
<span id='Ext-button-Button-method-onMenuTriggerOver'> /**
|
</span> * @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,
|
arrowTip = me.arrowTooltip;
|
|
me.overMenuTrigger = true;
|
// We don't have a separate arrow element, so we only add the tip attribute if
|
// we're over that part of the button
|
if (me.split && arrowTip) {
|
me.btnWrap.dom.setAttribute(me.getTipAttr(), arrowTip);
|
}
|
me.fireEvent('menutriggerover', me, me.menu, e);
|
},
|
|
<span id='Ext-button-Button-method-onMenuTriggerOut'> /**
|
</span> * @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;
|
// See onMenuTriggerOver
|
if (me.split && me.arrowTooltip) {
|
me.btnWrap.dom.setAttribute(me.getTipAttr(), '');
|
}
|
me.fireEvent('menutriggerout', me, me.menu, e);
|
},
|
|
<span id='Ext-button-Button-method-enable'> // inherit docs
|
</span> enable: function(silent) {
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.removeClsWithUI('disabled');
|
if (me.rendered) {
|
me.el.dom.setAttribute('tabIndex', me.tabIndex);
|
}
|
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-disable'> // inherit docs
|
</span> disable: function(silent) {
|
var me = this;
|
|
me.callParent(arguments);
|
|
me.addClsWithUI('disabled');
|
me.removeClsWithUI(me.overCls);
|
if (me.rendered) {
|
me.el.dom.removeAttribute('tabIndex');
|
}
|
|
// IE renders disabled text by layering gray text on top of white text, offset by 1 pixel. Normally this is fine
|
// but in some circumstances (such as using formBind) it gets confused and renders them side by side instead.
|
if (me.btnInnerEl && Ext.isIE7m) {
|
me.btnInnerEl.repaint();
|
}
|
|
return me;
|
},
|
|
<span id='Ext-button-Button-method-setScale'> /**
|
</span> * 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);
|
},
|
|
<span id='Ext-button-Button-method-setUI'> // inherit docs
|
</span> 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';
|
},
|
|
|
<span id='Ext-button-Button-method-onMouseDown'> // @private
|
</span> onMouseDown: function(e) {
|
var me = this;
|
|
if (Ext.isIE) {
|
// In IE the use of unselectable on the button's elements causes the element
|
// to not receive focus, even when it is directly clicked.
|
me.getFocusEl().focus();
|
}
|
|
if (!me.disabled && e.button === 0) {
|
Ext.button.Manager.onButtonMousedown(me, e);
|
me.addClsWithUI(me.pressedCls);
|
}
|
},
|
<span id='Ext-button-Button-method-onMouseUp'> // @private
|
</span> onMouseUp: function(e) {
|
var me = this;
|
if (e.button === 0) {
|
if (!me.pressed) {
|
me.removeClsWithUI(me.pressedCls);
|
}
|
}
|
},
|
<span id='Ext-button-Button-method-onMenuShow'> // @private
|
</span> onMenuShow: function(e) {
|
var me = this;
|
me.ignoreNextClick = 0;
|
me.addClsWithUI(me.menuActiveCls);
|
me.fireEvent('menushow', me, me.menu);
|
},
|
|
<span id='Ext-button-Button-method-onMenuHide'> // @private
|
</span> onMenuHide: function(e) {
|
var me = this;
|
me.removeClsWithUI(me.menuActiveCls);
|
me.ignoreNextClick = Ext.defer(me.restoreClick, 250, me);
|
me.fireEvent('menuhide', me, me.menu);
|
me.focus();
|
},
|
|
<span id='Ext-button-Button-method-restoreClick'> // @private
|
</span> restoreClick: function() {
|
this.ignoreNextClick = 0;
|
},
|
|
<span id='Ext-button-Button-method-onDownKey'> // @private
|
</span> onDownKey: function(k, e) {
|
var me = this;
|
|
if (me.menu && !me.disabled) {
|
me.showMenu();
|
e.stopEvent();
|
return false;
|
}
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
