-<html>\r
-<head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.Button"></div>/**\r
- * @class Ext.Button\r
- * @extends Ext.BoxComponent\r
- * Simple Button class\r
- * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)\r
- * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image\r
- * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')\r
- * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).\r
- * The handler is passed the following parameters:<div class="mdetail-params"><ul>\r
- * <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li>\r
- * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>\r
- * </ul></div>\r
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).\r
- * See also {@link Ext.Panel}.<tt>{@link Ext.Panel#minButtonWidth minButtonWidth}</tt>.\r
- * @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\r
- * @cfg {Boolean} hidden True to start hidden (defaults to false)\r
- * @cfg {Boolean} disabled True to start disabled (defaults to false)\r
- * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)\r
- * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)\r
- * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be\r
- * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).\r
- * @constructor\r
- * Create a new button\r
- * @param {Object} config The config object\r
- * @xtype button\r
- */\r
-Ext.Button = Ext.extend(Ext.BoxComponent, {\r
- /**\r
- * Read-only. True if this button is hidden\r
- * @type Boolean\r
- */\r
- hidden : false,\r
- /**\r
- * Read-only. True if this button is disabled\r
- * @type Boolean\r
- */\r
- disabled : false,\r
- /**\r
- * Read-only. True if this button is pressed (only if enableToggle = true)\r
- * @type Boolean\r
- */\r
- pressed : false,\r
-\r
- /**\r
- * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)\r
- */\r
-\r
- /**\r
- * @cfg {Boolean} allowDepress\r
- * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.\r
- */\r
-\r
- /**\r
- * @cfg {Boolean} enableToggle\r
- * True to enable pressed/not pressed toggling (defaults to false)\r
- */\r
- enableToggle : false,\r
- /**\r
- * @cfg {Function} toggleHandler\r
- * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params">\r
- * <li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li>\r
- * <li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li>\r
- * </ul>\r
- */\r
- /**\r
- * @cfg {Mixed} menu\r
- * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).\r
- */\r
- /**\r
- * @cfg {String} menuAlign\r
- * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').\r
- */\r
- menuAlign : 'tl-bl?',\r
-\r
- /**\r
- * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the\r
- * text to be used if this item is shown in the overflow menu. See also\r
- * {@link Ext.Toolbar.Item}.<code>{@link Ext.Toolbar.Item#overflowText overflowText}</code>.\r
- */\r
- /**\r
- * @cfg {String} iconCls\r
- * A css class which sets a background image to be used as the icon for this button\r
- */\r
- /**\r
- * @cfg {String} type\r
- * submit, reset or button - defaults to 'button'\r
- */\r
- type : 'button',\r
-\r
- // private\r
- menuClassTarget : 'tr:nth(2)',\r
-\r
- /**\r
- * @cfg {String} clickEvent\r
- * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).\r
- * Defaults to <tt>'click'</tt>.\r
- */\r
- clickEvent : 'click',\r
-\r
- /**\r
- * @cfg {Boolean} handleMouseEvents\r
- * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)\r
- */\r
- handleMouseEvents : true,\r
-\r
- /**\r
- * @cfg {String} tooltipType\r
- * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.\r
- */\r
- tooltipType : 'qtip',\r
-\r
- /**\r
- * @cfg {String} buttonSelector\r
- * <p>(Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the\r
- * DOM structure created.</p>\r
- * <p>When a custom {@link #template} is used, you must ensure that this selector results in the selection of\r
- * a focussable element.</p>\r
- * <p>Defaults to <b><tt>'button:first-child'</tt></b>.</p>\r
- */\r
- buttonSelector : 'button:first-child',\r
-\r
- /**\r
- * @cfg {String} scale\r
- * <p>(Optional) The size of the Button. Three values are allowed:</p>\r
- * <ul class="mdetail-params">\r
- * <li>'small'<div class="sub-desc">Results in the button element being 16px high.</div></li>\r
- * <li>'medium'<div class="sub-desc">Results in the button element being 24px high.</div></li>\r
- * <li>'large'<div class="sub-desc">Results in the button element being 32px high.</div></li>\r
- * </ul>\r
- * <p>Defaults to <b><tt>'small'</tt></b>.</p>\r
- */\r
- scale : 'small',\r
-\r
- /**\r
- * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the\r
- * <code>{@link #handler}</code> and <code>{@link #toggleHandler}</code> is\r
- * executed. Defaults to this Button.\r
- */\r
-\r
- /**\r
- * @cfg {String} iconAlign\r
- * <p>(Optional) The side of the Button box to render the icon. Four values are allowed:</p>\r
- * <ul class="mdetail-params">\r
- * <li>'top'<div class="sub-desc"></div></li>\r
- * <li>'right'<div class="sub-desc"></div></li>\r
- * <li>'bottom'<div class="sub-desc"></div></li>\r
- * <li>'left'<div class="sub-desc"></div></li>\r
- * </ul>\r
- * <p>Defaults to <b><tt>'left'</tt></b>.</p>\r
- */\r
- iconAlign : 'left',\r
-\r
- /**\r
- * @cfg {String} arrowAlign\r
- * <p>(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.\r
- * Two values are allowed:</p>\r
- * <ul class="mdetail-params">\r
- * <li>'right'<div class="sub-desc"></div></li>\r
- * <li>'bottom'<div class="sub-desc"></div></li>\r
- * </ul>\r
- * <p>Defaults to <b><tt>'right'</tt></b>.</p>\r
- */\r
- arrowAlign : 'right',\r
-\r
- /**\r
- * @cfg {Ext.Template} template (Optional)\r
- * <p>A {@link Ext.Template Template} used to create the Button's DOM structure.</p>\r
- * Instances, or subclasses which need a different DOM structure may provide a different\r
- * template layout in conjunction with an implementation of {@link #getTemplateArgs}.\r
- * @type Ext.Template\r
- * @property template\r
- */\r
- /**\r
- * @cfg {String} cls\r
- * A CSS class string to apply to the button's main element.\r
- */\r
- /**\r
- * @property menu\r
- * @type Menu\r
- * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.\r
- */\r
-\r
- initComponent : function(){\r
- Ext.Button.superclass.initComponent.call(this);\r
-\r
- this.addEvents(\r
- /**\r
- * @event click\r
- * Fires when this button is clicked\r
- * @param {Button} this\r
- * @param {EventObject} e The click event\r
- */\r
- 'click',\r
- /**\r
- * @event toggle\r
- * Fires when the 'pressed' state of this button changes (only if enableToggle = true)\r
- * @param {Button} this\r
- * @param {Boolean} pressed\r
- */\r
- 'toggle',\r
- /**\r
- * @event mouseover\r
- * Fires when the mouse hovers over the button\r
- * @param {Button} this\r
- * @param {Event} e The event object\r
- */\r
- 'mouseover',\r
- /**\r
- * @event mouseout\r
- * Fires when the mouse exits the button\r
- * @param {Button} this\r
- * @param {Event} e The event object\r
- */\r
- 'mouseout',\r
- /**\r
- * @event menushow\r
- * If this button has a menu, this event fires when it is shown\r
- * @param {Button} this\r
- * @param {Menu} menu\r
- */\r
- 'menushow',\r
- /**\r
- * @event menuhide\r
- * If this button has a menu, this event fires when it is hidden\r
- * @param {Button} this\r
- * @param {Menu} menu\r
- */\r
- 'menuhide',\r
- /**\r
- * @event menutriggerover\r
- * If this button has a menu, this event fires when the mouse enters the menu triggering element\r
- * @param {Button} this\r
- * @param {Menu} menu\r
- * @param {EventObject} e\r
- */\r
- 'menutriggerover',\r
- /**\r
- * @event menutriggerout\r
- * If this button has a menu, this event fires when the mouse leaves the menu triggering element\r
- * @param {Button} this\r
- * @param {Menu} menu\r
- * @param {EventObject} e\r
- */\r
- 'menutriggerout'\r
- );\r
- if(this.menu){\r
- this.menu = Ext.menu.MenuMgr.get(this.menu);\r
- }\r
- if(Ext.isString(this.toggleGroup)){\r
- this.enableToggle = true;\r
- }\r
- },\r
-\r
-/**\r
- * <p>This method returns an Array which provides substitution parameters for the {@link #template Template} used\r
- * to create this Button's DOM structure.</p>\r
- * <p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide their\r
- * own implementation of this method.</p>\r
- * <p>The default implementation which provides data for the default {@link #template} returns an Array containing the\r
- * following items:</p><div class="mdetail-params"><ul>\r
- * <li>The <button>'s {@link #type}</li>\r
- * <li>A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.</li>\r
- * <li>A CSS class to determine the presence and position of an arrow icon. (<code>'x-btn-arrow'</code> or <code>'x-btn-arrow-bottom'</code> or <code>''</code>)</li>\r
- * <li>The {@link #cls} CSS class name applied to the button's wrapping <table> element.</li>\r
- * <li>The Component id which is applied to the button's wrapping <table> element.</li>\r
- * </ul></div>\r
- * @return {Array} Substitution data for a Template.\r
- */\r
- getTemplateArgs : function(){\r
- return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];\r
- },\r
-\r
- // private\r
- setButtonClass : function(){\r
- if(this.useSetClass){\r
- if(!Ext.isEmpty(this.oldCls)){\r
- this.el.removeClass([this.oldCls, 'x-btn-pressed']);\r
- }\r
- this.oldCls = (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';\r
- this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]);\r
- }\r
- },\r
-\r
- // protected\r
- getMenuClass : function(){\r
- return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : '';\r
- },\r
-\r
- // private\r
- onRender : function(ct, position){\r
- if(!this.template){\r
- if(!Ext.Button.buttonTemplate){\r
- // hideous table template\r
- Ext.Button.buttonTemplate = new Ext.Template(\r
- '<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',\r
- '<tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr>',\r
- '<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"><i> </i></td></tr>',\r
- '<tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </i></td></tr>',\r
- '</tbody></table>');\r
- Ext.Button.buttonTemplate.compile();\r
- }\r
- this.template = Ext.Button.buttonTemplate;\r
- }\r
-\r
- var btn, targs = this.getTemplateArgs();\r
-\r
- if(position){\r
- btn = this.template.insertBefore(position, targs, true);\r
- }else{\r
- btn = this.template.append(ct, targs, true);\r
- }\r
- /**\r
- * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,\r
- * this references a <tt><button></tt> element. Read only.\r
- * @type Ext.Element\r
- * @property btnEl\r
- */\r
- this.btnEl = btn.child(this.buttonSelector);\r
- this.mon(this.btnEl, {\r
- scope: this,\r
- focus: this.onFocus,\r
- blur: this.onBlur\r
- });\r
-\r
- this.initButtonEl(btn, this.btnEl);\r
-\r
- Ext.ButtonToggleMgr.register(this);\r
- },\r
-\r
- // private\r
- initButtonEl : function(btn, btnEl){\r
- this.el = btn;\r
- this.setIcon(this.icon);\r
- this.setText(this.text);\r
- this.setIconClass(this.iconCls);\r
- if(Ext.isDefined(this.tabIndex)){\r
- btnEl.dom.tabIndex = this.tabIndex;\r
- }\r
- if(this.tooltip){\r
- this.setTooltip(this.tooltip, true);\r
- }\r
-\r
- if(this.handleMouseEvents){\r
- this.mon(btn, {\r
- scope: this,\r
- mouseover: this.onMouseOver,\r
- mousedown: this.onMouseDown\r
- });\r
-\r
- // new functionality for monitoring on the document level\r
- //this.mon(btn, 'mouseout', this.onMouseOut, this);\r
- }\r
-\r
- if(this.menu){\r
- this.mon(this.menu, {\r
- scope: this,\r
- show: this.onMenuShow,\r
- hide: this.onMenuHide\r
- });\r
- }\r
-\r
- if(this.repeat){\r
- var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});\r
- this.mon(repeater, 'click', this.onClick, this);\r
- }\r
- this.mon(btn, this.clickEvent, this.onClick, this);\r
- },\r
-\r
- // private\r
- afterRender : function(){\r
- Ext.Button.superclass.afterRender.call(this);\r
- this.useSetClass = true;\r
- this.setButtonClass();\r
- this.doc = Ext.getDoc();\r
- this.doAutoWidth();\r
- },\r
-\r
- /**\r
- * Sets the CSS class that provides a background image to use as the button's icon. This method also changes\r
- * the value of the {@link iconCls} config internally.\r
- * @param {String} cls The CSS class providing the icon image\r
- * @return {Ext.Button} this\r
- */\r
- setIconClass : function(cls){\r
- this.iconCls = cls;\r
- if(this.el){\r
- this.btnEl.dom.className = '';\r
- this.btnEl.addClass(['x-btn-text', cls || '']);\r
- this.setButtonClass();\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the tooltip for this Button.\r
- * @param {String/Object} tooltip. This may be:<div class="mdesc-details"><ul>\r
- * <li><b>String</b> : A string to be used as innerHTML (html tags are accepted) to show in a tooltip</li>\r
- * <li><b>Object</b> : A configuration object for {@link Ext.QuickTips#register}.</li>\r
- * </ul></div>\r
- * @return {Ext.Button} this\r
- */\r
- setTooltip : function(tooltip, /* private */ initial){\r
- if(this.rendered){\r
- if(!initial){\r
- this.clearTip();\r
- }\r
- if(Ext.isObject(tooltip)){\r
- Ext.QuickTips.register(Ext.apply({\r
- target: this.btnEl.id\r
- }, tooltip));\r
- this.tooltip = tooltip;\r
- }else{\r
- this.btnEl.dom[this.tooltipType] = tooltip;\r
- }\r
- }else{\r
- this.tooltip = tooltip;\r
- }\r
- return this;\r
- },\r
-\r
- // private\r
- clearTip : function(){\r
- if(Ext.isObject(this.tooltip)){\r
- Ext.QuickTips.unregister(this.btnEl);\r
- }\r
- },\r
-\r
- // private\r
- beforeDestroy : function(){\r
- if(this.rendered){\r
- this.clearTip();\r
- }\r
- if(this.menu && this.destroyMenu !== false) {\r
- Ext.destroy(this.menu);\r
- }\r
- Ext.destroy(this.repeater);\r
- },\r
-\r
- // private\r
- onDestroy : function(){\r
- if(this.rendered){\r
- this.doc.un('mouseover', this.monitorMouseOver, this);\r
- this.doc.un('mouseup', this.onMouseUp, this);\r
- delete this.doc;\r
- delete this.btnEl;\r
- Ext.ButtonToggleMgr.unregister(this);\r
- }\r
- Ext.Button.superclass.onDestroy.call(this);\r
- },\r
-\r
- // private\r
- doAutoWidth : function(){\r
- if(this.el && this.text && this.width === undefined){\r
- this.el.setWidth('auto');\r
- if(Ext.isIE7 && Ext.isStrict){\r
- var ib = this.btnEl;\r
- if(ib && ib.getWidth() > 20){\r
- ib.clip();\r
- ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));\r
- }\r
- }\r
- if(this.minWidth){\r
- if(this.el.getWidth() < this.minWidth){\r
- this.el.setWidth(this.minWidth);\r
- }\r
- }\r
- }\r
- },\r
-\r
- /**\r
- * Assigns this Button's click handler\r
- * @param {Function} handler The function to call when the button is clicked\r
- * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.\r
- * Defaults to this Button.\r
- * @return {Ext.Button} this\r
- */\r
- setHandler : function(handler, scope){\r
- this.handler = handler;\r
- this.scope = scope;\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets this Button's text\r
- * @param {String} text The button text\r
- * @return {Ext.Button} this\r
- */\r
- setText : function(text){\r
- this.text = text;\r
- if(this.el){\r
- this.btnEl.update(text || ' ');\r
- this.setButtonClass();\r
- }\r
- this.doAutoWidth();\r
- return this;\r
- },\r
-\r
- /**\r
- * Sets the background image (inline style) of the button. This method also changes\r
- * the value of the {@link icon} config internally.\r
- * @param {String} icon The path to an image to display in the button\r
- * @return {Ext.Button} this\r
- */\r
- setIcon : function(icon){\r
- this.icon = icon;\r
- if(this.el){\r
- this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');\r
- this.setButtonClass();\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Gets the text for this Button\r
- * @return {String} The button text\r
- */\r
- getText : function(){\r
- return this.text;\r
- },\r
-\r
- /**\r
- * If a state it passed, it becomes the pressed state otherwise the current state is toggled.\r
- * @param {Boolean} state (optional) Force a particular state\r
- * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.\r
- * @return {Ext.Button} this\r
- */\r
- toggle : function(state, suppressEvent){\r
- state = state === undefined ? !this.pressed : !!state;\r
- if(state != this.pressed){\r
- if(this.rendered){\r
- this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');\r
- }\r
- this.pressed = state;\r
- if(!suppressEvent){\r
- this.fireEvent('toggle', this, state);\r
- if(this.toggleHandler){\r
- this.toggleHandler.call(this.scope || this, this, state);\r
- }\r
- }\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Focus the button\r
- */\r
- focus : function(){\r
- this.btnEl.focus();\r
- },\r
-\r
- // private\r
- onDisable : function(){\r
- this.onDisableChange(true);\r
- },\r
-\r
- // private\r
- onEnable : function(){\r
- this.onDisableChange(false);\r
- },\r
-\r
- onDisableChange : function(disabled){\r
- if(this.el){\r
- if(!Ext.isIE6 || !this.text){\r
- this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);\r
- }\r
- this.el.dom.disabled = disabled;\r
- }\r
- this.disabled = disabled;\r
- },\r
-\r
- /**\r
- * Show this button's menu (if it has one)\r
- */\r
- showMenu : function(){\r
- if(this.rendered && this.menu){\r
- if(this.tooltip){\r
- Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);\r
- }\r
- if(this.menu.isVisible()){\r
- this.menu.hide();\r
- }\r
- this.menu.ownerCt = this;\r
- this.menu.show(this.el, this.menuAlign);\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Hide this button's menu (if it has one)\r
- */\r
- hideMenu : function(){\r
- if(this.hasVisibleMenu()){\r
- this.menu.hide();\r
- }\r
- return this;\r
- },\r
-\r
- /**\r
- * Returns true if the button has a menu and it is visible\r
- * @return {Boolean}\r
- */\r
- hasVisibleMenu : function(){\r
- return this.menu && this.menu.ownerCt == this && this.menu.isVisible();\r
- },\r
-\r
- // private\r
- onClick : function(e){\r
- if(e){\r
- e.preventDefault();\r
- }\r
- if(e.button !== 0){\r
- return;\r
- }\r
- if(!this.disabled){\r
- if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){\r
- this.toggle();\r
- }\r
- if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){\r
- this.showMenu();\r
- }\r
- this.fireEvent('click', this, e);\r
- if(this.handler){\r
- //this.el.removeClass('x-btn-over');\r
- this.handler.call(this.scope || this, this, e);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- isMenuTriggerOver : function(e, internal){\r
- return this.menu && !internal;\r
- },\r
-\r
- // private\r
- isMenuTriggerOut : function(e, internal){\r
- return this.menu && !internal;\r
- },\r
-\r
- // private\r
- onMouseOver : function(e){\r
- if(!this.disabled){\r
- var internal = e.within(this.el, true);\r
- if(!internal){\r
- this.el.addClass('x-btn-over');\r
- if(!this.monitoringMouseOver){\r
- this.doc.on('mouseover', this.monitorMouseOver, this);\r
- this.monitoringMouseOver = true;\r
- }\r
- this.fireEvent('mouseover', this, e);\r
- }\r
- if(this.isMenuTriggerOver(e, internal)){\r
- this.fireEvent('menutriggerover', this, this.menu, e);\r
- }\r
- }\r
- },\r
-\r
- // private\r
- monitorMouseOver : function(e){\r
- if(e.target != this.el.dom && !e.within(this.el)){\r
- if(this.monitoringMouseOver){\r
- this.doc.un('mouseover', this.monitorMouseOver, this);\r
- this.monitoringMouseOver = false;\r
- }\r
- this.onMouseOut(e);\r
- }\r
- },\r
-\r
- // private\r
- onMouseOut : function(e){\r
- var internal = e.within(this.el) && e.target != this.el.dom;\r
- this.el.removeClass('x-btn-over');\r
- this.fireEvent('mouseout', this, e);\r
- if(this.isMenuTriggerOut(e, internal)){\r
- this.fireEvent('menutriggerout', this, this.menu, e);\r
- }\r
- },\r
-\r
- focus : function() {\r
- this.btnEl.focus();\r
- },\r
-\r
- blur : function() {\r
- this.btnEl.blur();\r
- },\r
-\r
- // private\r
- onFocus : function(e){\r
- if(!this.disabled){\r
- this.el.addClass('x-btn-focus');\r
- }\r
- },\r
- // private\r
- onBlur : function(e){\r
- this.el.removeClass('x-btn-focus');\r
- },\r
-\r
- // private\r
- getClickEl : function(e, isUp){\r
- return this.el;\r
- },\r
-\r
- // private\r
- onMouseDown : function(e){\r
- if(!this.disabled && e.button === 0){\r
- this.getClickEl(e).addClass('x-btn-click');\r
- this.doc.on('mouseup', this.onMouseUp, this);\r
- }\r
- },\r
- // private\r
- onMouseUp : function(e){\r
- if(e.button === 0){\r
- this.getClickEl(e, true).removeClass('x-btn-click');\r
- this.doc.un('mouseup', this.onMouseUp, this);\r
- }\r
- },\r
- // private\r
- onMenuShow : function(e){\r
- if(this.menu.ownerCt == this){\r
- this.menu.ownerCt = this;\r
- this.ignoreNextClick = 0;\r
- this.el.addClass('x-btn-menu-active');\r
- this.fireEvent('menushow', this, this.menu);\r
- }\r
- },\r
- // private\r
- onMenuHide : function(e){\r
- if(this.menu.ownerCt == this){\r
- this.el.removeClass('x-btn-menu-active');\r
- this.ignoreNextClick = this.restoreClick.defer(250, this);\r
- this.fireEvent('menuhide', this, this.menu);\r
- delete this.menu.ownerCt;\r
- }\r
- },\r
-\r
- // private\r
- restoreClick : function(){\r
- this.ignoreNextClick = 0;\r
- }\r
-\r
- /**\r
- * @cfg {String} autoEl @hide\r
- */\r
- /**\r
- * @cfg {String/Object} html @hide\r
- */\r
- /**\r
- * @cfg {String} contentEl @hide\r
- */\r
- /**\r
- * @cfg {Mixed} data @hide\r
- */\r
- /**\r
- * @cfg {Mixed} tpl @hide\r
- */\r
- /**\r
- * @cfg {String} tplWriteMode @hide\r
- */\r
-});\r
-Ext.reg('button', Ext.Button);\r
-\r
-// Private utility class used by Button\r
-Ext.ButtonToggleMgr = function(){\r
- var groups = {};\r
-\r
- function toggleGroup(btn, state){\r
- if(state){\r
- var g = groups[btn.toggleGroup];\r
- for(var i = 0, l = g.length; i < l; i++){\r
- if(g[i] != btn){\r
- g[i].toggle(false);\r
- }\r
- }\r
- }\r
- }\r
-\r
- return {\r
- register : function(btn){\r
- if(!btn.toggleGroup){\r
- return;\r
- }\r
- var g = groups[btn.toggleGroup];\r
- if(!g){\r
- g = groups[btn.toggleGroup] = [];\r
- }\r
- g.push(btn);\r
- btn.on('toggle', toggleGroup);\r
- },\r
-\r
- unregister : function(btn){\r
- if(!btn.toggleGroup){\r
- return;\r
- }\r
- var g = groups[btn.toggleGroup];\r
- if(g){\r
- g.remove(btn);\r
- btn.un('toggle', toggleGroup);\r
- }\r
- },\r
-\r
- /**\r
- * Gets the pressed button in the passed group or null\r
- * @param {String} group\r
- * @return Button\r
- */\r
- getPressed : function(group){\r
- var g = groups[group];\r
- if(g){\r
- for(var i = 0, len = g.length; i < len; i++){\r
- if(g[i].pressed === true){\r
- return g[i];\r
- }\r
- }\r
- }\r
- return null;\r
- }\r
- };\r
-}();\r
-</pre> \r
-</body>\r
-</html>
\ No newline at end of file
+<!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 #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.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',
+
+<span id='Ext-button-Button-property-hidden'> /**
+</span> * @property {Boolean} hidden
+ * True if this button is hidden. Read-only.
+ */
+ hidden: false,
+
+<span id='Ext-button-Button-property-disabled'> /**
+</span> * @property {Boolean} disabled
+ * True if this button is disabled. Read-only.
+ */
+ disabled: false,
+
+<span id='Ext-button-Button-property-pressed'> /**
+</span> * @property {Boolean} pressed
+ * True if this button is pressed (only if enableToggle = true). Read-only.
+ */
+ 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 (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')
+ */
+
+<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=true]
+ * 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)
+ */
+
+<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.
+ */
+
+<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.
+ */
+ 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.Element#alignTo} for more details).
+ */
+ menuAlign: 'tl-bl?',
+
+<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-type'> /**
+</span> * @cfg {String} type
+ * The type of `<input>` to create: submit, reset or button.
+ */
+ type: 'button',
+
+<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 visit when the button is clicked. Specifying this config is equivalent to specifying:
+ *
+ * handler: function() { window.location = "http://www.sencha.com" }
+ */
+
+<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.
+ */
+
+ 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}">&#160;</span>' +
+ '</button>' +
+ '</tpl>' +
+ '</em>' ,
+
+<span id='Ext-button-Button-cfg-scale'> /**
+</span> * @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',
+
+<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 #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 #menu} config
+ * option.
+ */
+
+<span id='Ext-button-Button-cfg-autoWidth'> /**
+</span> * @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.
+ */
+
+ maskOnDisable: false,
+
+ // inherit docs
+ initComponent: function() {
+ var me = this;
+ me.callParent(arguments);
+
+ me.addEvents(
+<span id='Ext-button-Button-event-click'> /**
+</span> * @event click
+ * Fires when this button is clicked
+ * @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'
+ );
+
+ 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);
+ me.menu.ownerCt = 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.enableToggle = true;
+ }
+
+ },
+
+ // private
+ initAria: function() {
+ this.callParent();
+ var actionEl = this.getActionEl();
+ if (this.menu) {
+ actionEl.dom.setAttribute('aria-haspopup', true);
+ }
+ },
+
+ // inherit docs
+ getActionEl: function() {
+ return this.btnEl;
+ },
+
+ // inherit docs
+ getFocusEl: function() {
+ return this.btnEl;
+ },
+
+ // private
+ setButtonCls: function() {
+ var me = this,
+ cls = [],
+ btnIconEl = me.btnIconEl,
+ hide = 'x-hide-display';
+
+ if (me.useSetClass) {
+ if (!Ext.isEmpty(me.oldCls)) {
+ me.removeClsWithUI(me.oldCls);
+ me.removeClsWithUI(me.pressedCls);
+ }
+
+ // Check whether the button has an icon or not, and if it has an icon, what is th alignment
+ if (me.iconCls || me.icon) {
+ if (me.text) {
+ cls.push('icon-text-' + me.iconAlign);
+ } else {
+ cls.push('icon');
+ }
+ if (btnIconEl) {
+ btnIconEl.removeCls(hide);
+ }
+ } else {
+ if (me.text) {
+ cls.push('noicon');
+ }
+ if (btnIconEl) {
+ btnIconEl.addCls(hide);
+ }
+ }
+
+ me.oldCls = cls;
+ me.addClsWithUI(cls);
+ me.addClsWithUI(me.pressed ? me.pressedCls : null);
+ }
+ },
+
+ // private
+ onRender: function(ct, position) {
+ // classNames for the button
+ var me = this,
+ repeater, btn;
+
+ // Apply the renderData to the template args
+ Ext.applyIf(me.renderData, me.getTemplateArgs());
+
+ me.addChildEls('btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl');
+
+ if (me.scale) {
+ me.ui = me.ui + '-' + me.scale;
+ }
+
+ // Render internal structure
+ me.callParent(arguments);
+
+ // If it is a split button + has a toolip for the arrow
+ if (me.split && me.arrowTooltip) {
+ me.arrowEl.dom.setAttribute(me.getTipAttr(), me.arrowTooltip);
+ }
+
+ // Add listeners to the focus and blur events on the element
+ me.mon(me.btnEl, {
+ scope: me,
+ focus: me.onFocus,
+ blur : me.onBlur
+ });
+
+ // Set btn as a local variable for easy access
+ btn = me.el;
+
+ if (me.icon) {
+ me.setIcon(me.icon);
+ }
+
+ if (me.iconCls) {
+ me.setIconCls(me.iconCls);
+ }
+
+ if (me.tooltip) {
+ me.setTooltip(me.tooltip, true);
+ }
+
+ if (me.textAlign) {
+ me.setTextAlign(me.textAlign);
+ }
+
+ // Add the mouse events to the button
+ if (me.handleMouseEvents) {
+ me.mon(btn, {
+ scope: me,
+ mouseover: me.onMouseOver,
+ mouseout: me.onMouseOut,
+ mousedown: me.onMouseDown
+ });
+
+ if (me.split) {
+ me.mon(btn, {
+ mousemove: me.onMouseMove,
+ 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 = Ext.create('Ext.util.KeyMap', me.el, {
+ key: Ext.EventObject.DOWN,
+ handler: me.onDownKey,
+ scope: me
+ });
+ }
+
+ // Check if it is a repeat button
+ if (me.repeat) {
+ repeater = Ext.create('Ext.util.ClickRepeater', btn, Ext.isObject(me.repeat) ? me.repeat: {});
+ me.mon(repeater, 'click', me.onRepeatClick, me);
+ } else {
+ me.mon(btn, me.clickEvent, me.onClick, me);
+ }
+
+ // Register the button in the toggle manager
+ Ext.ButtonToggleManager.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.
+ *
+ * @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.type The `<button>`'s {@link #type}
+ * @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.cls A CSS class name applied to the Button's main `<tbody>` element which determines the
+ * button's scale and icon alignment.
+ * @return {String} return.text The {@link #text} to display ion the Button.
+ * @return {Number} return.tabIndex The tab index within the input flow.
+ */
+ getTemplateArgs: function() {
+ var me = this,
+ persistentPadding = me.getPersistentBtnPadding(),
+ innerSpanStyle = '';
+
+ // Create negative margin offsets to counteract persistent button padding if needed
+ if (Math.max.apply(Math, persistentPadding) > 0) {
+ innerSpanStyle = 'margin:' + Ext.Array.map(persistentPadding, function(pad) {
+ return -pad + 'px';
+ }).join(' ');
+ }
+
+ return {
+ href : me.getHref(),
+ target : me.target || '_blank',
+ type : me.type,
+ splitCls : me.getSplitCls(),
+ cls : me.cls,
+ iconCls : me.iconCls || '',
+ text : me.text || '&#160;',
+ tabIndex : me.tabIndex,
+ innerSpanStyle: innerSpanStyle
+ };
+ },
+
+<span id='Ext-button-Button-method-getHref'> /**
+</span> * @private
+ * If there is a configured href for this Button, returns the href with parameters appended.
+ * @returns The href string with parameters appended.
+ */
+ getHref: function() {
+ var me = this,
+ params = Ext.apply({}, me.baseParams);
+
+ // write baseParams first, then write any params
+ params = Ext.apply(params, me.params);
+ return me.href ? Ext.urlAppend(me.href, Ext.Object.toQueryString(params)) : 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.btnEl.dom.href = this.getHref();
+ },
+
+ getSplitCls: function() {
+ var me = this;
+ return me.split ? (me.baseCls + '-' + me.arrowCls) + ' ' + (me.baseCls + '-' + me.arrowCls + '-' + me.arrowAlign) : '';
+ },
+
+ // private
+ afterRender: function() {
+ var me = this;
+ me.useSetClass = true;
+ me.setButtonCls();
+ me.doc = Ext.getDoc();
+ this.callParent(arguments);
+ },
+
+<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) {
+ var me = this,
+ btnIconEl = me.btnIconEl,
+ oldCls = me.iconCls;
+
+ me.iconCls = cls;
+ if (btnIconEl) {
+ // Remove the previous iconCls from the button
+ btnIconEl.removeCls(oldCls);
+ btnIconEl.addCls(cls || '');
+ me.setButtonCls();
+ }
+ 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) {
+ me.clearTip();
+ }
+ if (Ext.isObject(tooltip)) {
+ Ext.tip.QuickTipManager.register(Ext.apply({
+ target: me.btnEl.id
+ },
+ tooltip));
+ me.tooltip = tooltip;
+ } else {
+ me.btnEl.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 + '-' + me.textAlign);
+ btnEl.addCls(me.baseCls + '-' + align);
+ }
+ me.textAlign = align;
+ return me;
+ },
+
+ getTipAttr: function(){
+ return this.tooltipType == 'qtip' ? 'data-qtip' : 'title';
+ },
+
+ // private
+ getRefItems: function(deep){
+ var menu = this.menu,
+ items;
+
+ if (menu) {
+ items = menu.getRefItems(deep);
+ items.unshift(menu);
+ }
+ return items || [];
+ },
+
+ // private
+ clearTip: function() {
+ if (Ext.isObject(this.tooltip)) {
+ Ext.tip.QuickTipManager.unregister(this.btnEl);
+ }
+ },
+
+ // private
+ 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();
+ },
+
+ // private
+ onDestroy: function() {
+ var me = this;
+ if (me.rendered) {
+ me.doc.un('mouseover', me.monitorMouseOver, me);
+ me.doc.un('mouseup', me.onMouseUp, me);
+ delete me.doc;
+ Ext.ButtonToggleManager.unregister(me);
+
+ Ext.destroy(me.keyMap);
+ delete me.keyMap;
+ }
+ 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) {
+ var me = this;
+ me.text = text;
+ if (me.el) {
+ me.btnInnerEl.update(text || '&#160;');
+ me.setButtonCls();
+ }
+ me.doComponentLayout();
+ return me;
+ },
+
+<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) {
+ var me = this,
+ iconEl = me.btnIconEl;
+
+ me.icon = icon;
+ if (iconEl) {
+ iconEl.setStyle('background-image', icon ? 'url(' + icon + ')': '');
+ me.setButtonCls();
+ }
+ return me;
+ },
+
+<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.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 me;
+ },
+
+ maybeShowMenu: function(){
+ var me = this;
+ if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) {
+ me.showMenu();
+ }
+ },
+
+<span id='Ext-button-Button-method-showMenu'> /**
+</span> * Shows this button's menu (if it has one)
+ */
+ showMenu: function() {
+ var me = this;
+ if (me.rendered && me.menu) {
+ if (me.tooltip && me.getTipAttr() != 'title') {
+ Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.btnEl);
+ }
+ if (me.menu.isVisible()) {
+ me.menu.hide();
+ }
+
+ me.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();
+ },
+
+ // private
+ onRepeatClick: function(repeat, e) {
+ this.onClick(e);
+ },
+
+ // private
+ onClick: function(e) {
+ var me = this;
+ if (me.preventDefault || (me.disabled && me.getHref()) && e) {
+ e.preventDefault();
+ }
+ if (e.button !== 0) {
+ return;
+ }
+ if (!me.disabled) {
+ me.doToggle();
+ me.maybeShowMenu();
+ me.fireHandler(e);
+ }
+ },
+
+ 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();
+ }
+ },
+
+<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,
+ 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);
+ }
+ }
+ }
+ },
+
+<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, 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;
+ },
+
+<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) {
+ var me = this;
+ me.addClsWithUI(me.overCls);
+ me.fireEvent('mouseover', me, 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) {
+ var me = this;
+ me.removeClsWithUI(me.overCls);
+ me.fireEvent('mouseout', me, 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;
+ me.overMenuTrigger = true;
+ 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;
+ 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;
+ },
+
+<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);
+ },
+
+ // 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
+ onFocus: function(e) {
+ var me = this;
+ if (!me.disabled) {
+ me.addClsWithUI(me.focusCls);
+ }
+ },
+
+ // private
+ onBlur: function(e) {
+ var me = this;
+ me.removeClsWithUI(me.focusCls);
+ },
+
+ // private
+ 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) {
+ 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) {
+ var me = this;
+ me.ignoreNextClick = 0;
+ me.addClsWithUI(me.menuActiveCls);
+ me.fireEvent('menushow', me, me.menu);
+ },
+
+ // private
+ 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() {
+ this.ignoreNextClick = 0;
+ },
+
+ // private
+ onDownKey: function() {
+ var me = this;
+
+ if (!me.disabled) {
+ if (me.menu) {
+ me.showMenu();
+ }
+ }
+ },
+
+<span id='Ext-button-Button-method-getPersistentBtnPadding'> /**
+</span> * @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]
+ */
+ 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);
+ }
+ }
+ }
+ }
+
+<span id='Ext-ButtonToggleManager'> /**
+</span> * 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);
+ }
+ },
+
+<span id='Ext-ButtonToggleManager-method-getPressed'> /**
+</span> * 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;
+ }
+ };
+});
+</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff