X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/docs/source/Button.html diff --git a/docs/source/Button.html b/docs/source/Button.html index 02a91e7b..9be1eb5a 100644 --- a/docs/source/Button.html +++ b/docs/source/Button.html @@ -1,262 +1,497 @@ - - - - The source code - - - - -
/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-
/** - * @class Ext.Button - * @extends Ext.BoxComponent - * Simple Button class - * @cfg {String} text The button text to be used as innerHTML (html tags are accepted) - * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image - * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon') - * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event). - * The handler is passed the following parameters:
- * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width). - * See also {@link Ext.Panel}.{@link Ext.Panel#minButtonWidth minButtonWidth}. - * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object - * @cfg {Boolean} hidden True to start hidden (defaults to false) - * @cfg {Boolean} disabled True to start disabled (defaults to false) - * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true) - * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed) - * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be - * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false). +Sencha Documentation Project
/**
+ * @class Ext.button.Button
+ * @extends Ext.Component
+
+Create simple buttons with this component. Customisations include {@link #config-iconAlign aligned}
+{@link #config-iconCls icons}, {@link #config-menu dropdown menus}, {@link #config-tooltip tooltips}
+and {@link #config-scale sizing options}. Specify a {@link #config-handler handler} to run code when
+a user clicks the button, or use {@link #config-listeners listeners} for other events such as
+{@link #events-mouseover mouseover}.
+
+{@img Ext.button.Button/Ext.button.Button1.png Ext.button.Button component}
+Example usage:
+
+    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:
+
+    Ext.create('Ext.Button', {
+        text    : 'Dyanmic 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:
+
+    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'`
+
+{@img Ext.button.Button/Ext.button.Button2.png Ext.button.Button component}
+Example usage:
+
+    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`.
+{@img Ext.button.Button/Ext.button.Button3.png Ext.button.Button component}
+Example usage:
+
+    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.
+{@img Ext.button.Button/Ext.button.Button4.png Ext.button.Button component}
+Example usage:
+
+    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:
+
+    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.');
+                }
+            }
+        }
+    });
+
  * @constructor
  * Create a new button
  * @param {Object} config The config object
  * @xtype button
+ * @markdown
+ * @docauthor Robert Dougan <rob@sencha.com>
  */
-Ext.Button = Ext.extend(Ext.BoxComponent, {
-    /**
-     * Read-only. True if this button is hidden
+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',
+
+    /**
+     * Read-only. True if this button is hidden
      * @type Boolean
      */
-    hidden : false,
-    /**
-     * Read-only. True if this button is disabled
+    hidden: false,
+
+    /**
+     * Read-only. True if this button is disabled
      * @type Boolean
      */
-    disabled : false,
-    /**
-     * Read-only. True if this button is pressed (only if enableToggle = true)
+    disabled: false,
+
+    /**
+     * Read-only. True if this button is pressed (only if enableToggle = true)
      * @type Boolean
      */
-    pressed : false,
+    pressed: false,
+
+    /**
+     * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
+     */
+
+    /**
+     * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
+     * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
+     */
+
+    /**
+     * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
+     * The handler is passed the following parameters:<div class="mdetail-params"><ul>
+     * <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li>
+     * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>
+     * </ul></div>
+     */
+
+    /**
+     * @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}.<tt>{@link Ext.panel.Panel#minButtonWidth minButtonWidth}</tt>.
+     */
+
+    /**
+     * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
+     */
 
-    /**
-     * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
+    /**
+     * @cfg {Boolean} hidden True to start hidden (defaults to false)
      */
 
-    /**
-     * @cfg {Boolean} allowDepress
+    /**
+     * @cfg {Boolean} disabled True to start disabled (defaults to false)
+     */
+
+    /**
+     * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+     */
+
+    /**
+     * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
+     */
+
+    /**
+     * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
+     * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
+     */
+
+    /**
+     * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
+     */
+
+    /**
+     * @cfg {Boolean} allowDepress
      * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
      */
 
-    /**
-     * @cfg {Boolean} enableToggle
+    /**
+     * @cfg {Boolean} enableToggle
      * True to enable pressed/not pressed toggling (defaults to false)
      */
-    enableToggle : false,
-    /**
-     * @cfg {Function} toggleHandler
-     * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:
    - *
  • button : Ext.Button
    this Button object
  • - *
  • state : Boolean
    The next state of the Button, true means pressed.
  • - *
+ enableToggle: false, + + /** + * @cfg {Function} toggleHandler + * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params"> + * <li><b>button</b> : Ext.button.Button<div class="sub-desc">this Button object</div></li> + * <li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li> + * </ul> */ - /** - * @cfg {Mixed} menu + + /** + * @cfg {Mixed} menu * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined). */ - /** - * @cfg {String} menuAlign - * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?'). + + /** + * @cfg {String} menuAlign + * The position to align the menu to (see {@link Ext.core.Element#alignTo} for more details, defaults to 'tl-bl?'). */ - menuAlign : 'tl-bl?', + menuAlign: 'tl-bl?', - /** - * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the + /** + * @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}. + * {@link Ext.toolbar.Item}.<code>{@link Ext.toolbar.Item#overflowText overflowText}</code>. */ - /** - * @cfg {String} iconCls + + /** + * @cfg {String} iconCls * A css class which sets a background image to be used as the icon for this button */ - /** - * @cfg {String} type + + /** + * @cfg {String} type * submit, reset or button - defaults to 'button' */ - type : 'button', + type: 'button', - // private - menuClassTarget : 'tr:nth(2)', - - /** - * @cfg {String} clickEvent + /** + * @cfg {String} clickEvent * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu). - * Defaults to 'click'. + * Defaults to <tt>'click'</tt>. */ - clickEvent : 'click', + clickEvent: 'click', + + /** + * @cfg {Boolean} preventDefault + * True to prevent the default action when the {@link #clickEvent} is processed. Defaults to true. + */ + preventDefault: true, - /** - * @cfg {Boolean} handleMouseEvents + /** + * @cfg {Boolean} handleMouseEvents * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true) */ - handleMouseEvents : true, + handleMouseEvents: true, - /** - * @cfg {String} tooltipType + /** + * @cfg {String} tooltipType * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute. */ - tooltipType : 'qtip', - - /** - * @cfg {String} buttonSelector - *

(Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the - * DOM structure created.

- *

When a custom {@link #template} is used, you must ensure that this selector results in the selection of - * a focussable element.

- *

Defaults to 'button:first-child'.

- */ - buttonSelector : 'button:first-child', - - /** - * @cfg {String} scale - *

(Optional) The size of the Button. Three values are allowed:

- *
    - *
  • '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.
  • - *
- *

Defaults to 'small'.

- */ - scale : 'small', - - /** - * @cfg {Object} scope The scope (this reference) in which the - * {@link #handler} and {@link #toggleHandler} is + tooltipType: 'qtip', + + /** + * @cfg {String} baseCls + * The base CSS class to add to all buttons. (Defaults to 'x-btn') + */ + baseCls: Ext.baseCSSPrefix + 'btn', + + /** + * @cfg {String} pressedCls + * The CSS class to add to a button when it is in the pressed state. (Defaults to 'x-btn-pressed') + */ + pressedCls: 'pressed', + + /** + * @cfg {String} overCls + * The CSS class to add to a button when it is in the over (hovered) state. (Defaults to 'x-btn-over') + */ + overCls: 'over', + + /** + * @cfg {String} focusCls + * The CSS class to add to a button when it is in the focussed state. (Defaults to 'x-btn-focus') + */ + focusCls: 'focus', + + /** + * @cfg {String} menuActiveCls + * The CSS class to add to a button when it's menu is active. (Defaults to 'x-btn-menu-active') + */ + menuActiveCls: 'menu-active', + + ariaRole: 'button', + + // inherited + renderTpl: + '<em class="{splitCls}">' + + '<tpl if="href">' + + '<a href="{href}" target="{target}"<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl> role="link">' + + '<span class="{baseCls}-inner">{text}</span>' + + '</a>' + + '</tpl>' + + '<tpl if="!href">' + + '<button 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 class="{baseCls}-inner" style="{innerSpanStyle}">{text}</span>' + + '</button>' + + '</tpl>' + + '</em>' , + + /** + * @cfg {String} scale + * <p>(Optional) The size of the Button. Three values are allowed:</p> + * <ul class="mdetail-params"> + * <li>'small'<div class="sub-desc">Results in the button element being 16px high.</div></li> + * <li>'medium'<div class="sub-desc">Results in the button element being 24px high.</div></li> + * <li>'large'<div class="sub-desc">Results in the button element being 32px high.</div></li> + * </ul> + * <p>Defaults to <b><tt>'small'</tt></b>.</p> + */ + scale: 'small', + + /** + * @private An array of allowed scales. + */ + allowedScales: ['small', 'medium', 'large'], + + /** + * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the + * <code>{@link #handler}</code> and <code>{@link #toggleHandler}</code> is * executed. Defaults to this Button. */ - /** - * @cfg {String} iconAlign - *

(Optional) The side of the Button box to render the icon. Four values are allowed:

- *
    - *
  • 'top'
  • - *
  • 'right'
  • - *
  • 'bottom'
  • - *
  • 'left'
  • - *
- *

Defaults to 'left'.

- */ - iconAlign : 'left', - - /** - * @cfg {String} arrowAlign - *

(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}. - * Two values are allowed:

- *
    - *
  • 'right'
  • - *
  • 'bottom'
  • - *
- *

Defaults to 'right'.

- */ - arrowAlign : 'right', - - /** - * @cfg {Ext.Template} template (Optional) - *

A {@link Ext.Template Template} used to create the Button's DOM structure.

+ /** + * @cfg {String} iconAlign + * <p>(Optional) The side of the Button box to render the icon. Four values are allowed:</p> + * <ul class="mdetail-params"> + * <li>'top'<div class="sub-desc"></div></li> + * <li>'right'<div class="sub-desc"></div></li> + * <li>'bottom'<div class="sub-desc"></div></li> + * <li>'left'<div class="sub-desc"></div></li> + * </ul> + * <p>Defaults to <b><tt>'left'</tt></b>.</p> + */ + iconAlign: 'left', + + /** + * @cfg {String} arrowAlign + * <p>(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}. + * Two values are allowed:</p> + * <ul class="mdetail-params"> + * <li>'right'<div class="sub-desc"></div></li> + * <li>'bottom'<div class="sub-desc"></div></li> + * </ul> + * <p>Defaults to <b><tt>'right'</tt></b>.</p> + */ + arrowAlign: 'right', + + /** + * @cfg {String} arrowCls + * <p>(Optional) The className used for the inner arrow element if the button has a menu.</p> + */ + arrowCls: 'arrow', + + /** + * @cfg {Ext.Template} template (Optional) + * <p>A {@link Ext.Template Template} used to create the Button's DOM structure.</p> * Instances, or subclasses which need a different DOM structure may provide a different * template layout in conjunction with an implementation of {@link #getTemplateArgs}. * @type Ext.Template * @property template */ - /** - * @cfg {String} cls + + /** + * @cfg {String} cls * A CSS class string to apply to the button's main element. */ - /** - * @property menu + + /** + * @property menu * @type Menu * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option. */ - /** - * @cfg {Boolean} autoWidth + + /** + * @cfg {Boolean} autoWidth * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content. * If the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent * the button from doing this automatic sizing. - * Defaults to undefined. + * Defaults to <tt>undefined</tt>. */ + + maskOnDisable: false, - initComponent : function(){ - Ext.Button.superclass.initComponent.call(this); + // inherit docs + initComponent: function() { + var me = this; + me.callParent(arguments); - this.addEvents( - /** - * @event click + me.addEvents( + /** + * @event click * Fires when this button is clicked * @param {Button} this * @param {EventObject} e The click event */ 'click', - /** - * @event toggle + + /** + * @event toggle * Fires when the 'pressed' state of this button changes (only if enableToggle = true) * @param {Button} this * @param {Boolean} pressed */ 'toggle', - /** - * @event mouseover + + /** + * @event mouseover * Fires when the mouse hovers over the button * @param {Button} this * @param {Event} e The event object */ 'mouseover', - /** - * @event mouseout + + /** + * @event mouseout * Fires when the mouse exits the button * @param {Button} this * @param {Event} e The event object */ 'mouseout', - /** - * @event menushow + + /** + * @event menushow * If this button has a menu, this event fires when it is shown * @param {Button} this * @param {Menu} menu */ 'menushow', - /** - * @event menuhide + + /** + * @event menuhide * If this button has a menu, this event fires when it is hidden * @param {Button} this * @param {Menu} menu */ 'menuhide', - /** - * @event menutriggerover + + /** + * @event menutriggerover * If this button has a menu, this event fires when the mouse enters the menu triggering element * @param {Button} this * @param {Menu} menu * @param {EventObject} e */ 'menutriggerover', - /** - * @event menutriggerout + + /** + * @event menutriggerout * If this button has a menu, this event fires when the mouse leaves the menu triggering element * @param {Button} this * @param {Menu} menu @@ -264,571 +499,823 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { */ 'menutriggerout' ); - if(this.menu){ - this.menu = Ext.menu.MenuMgr.get(this.menu); - } - if(Ext.isString(this.toggleGroup)){ - this.enableToggle = true; - } - }, - -/** - *

This method returns an Array which provides substitution parameters for the {@link #template Template} used - * to create this Button's DOM structure.

- *

Instances or subclasses which use a different Template to create a different DOM structure may need to provide their - * own implementation of this method.

- *

The default implementation which provides data for the default {@link #template} returns an Array containing the - * following items:

    - *
  • The <button>'s {@link #type}
  • - *
  • A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
  • - *
  • A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
  • - *
  • The {@link #cls} CSS class name applied to the button's wrapping <table> element.
  • - *
  • The Component id which is applied to the button's wrapping <table> element.
  • - *
- * @return {Array} Substitution data for a Template. - */ - getTemplateArgs : function(){ - return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id]; + + 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 - setButtonClass : function(){ - if(this.useSetClass){ - if(!Ext.isEmpty(this.oldCls)){ - this.el.removeClass([this.oldCls, 'x-btn-pressed']); - } - this.oldCls = (this.iconCls || this.icon) ? (this.text ? 'x-btn-text-icon' : 'x-btn-icon') : 'x-btn-noicon'; - this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]); + initAria: function() { + this.callParent(); + var actionEl = this.getActionEl(); + if (this.menu) { + actionEl.dom.setAttribute('aria-haspopup', true); } }, - // protected - getMenuClass : function(){ - return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : ''; + // inherit docs + getActionEl: function() { + return this.btnEl; + }, + + // inherit docs + getFocusEl: function() { + return this.btnEl; }, // private - onRender : function(ct, position){ - if(!this.template){ - if(!Ext.Button.buttonTemplate){ - // hideous table template - Ext.Button.buttonTemplate = new Ext.Template( - '', - '', - '', - '', - '
  
  
  
'); - Ext.Button.buttonTemplate.compile(); + setButtonCls: function() { + var me = this, + el = me.el, + cls = []; + + 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'); + } + } else if (me.text) { + cls.push('noicon'); } - this.template = Ext.Button.buttonTemplate; - } - - var btn, targs = this.getTemplateArgs(); - - if(position){ - btn = this.template.insertBefore(position, targs, true); - }else{ - btn = this.template.append(ct, targs, true); - } - /** - * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default, - * this references a <button> element. Read only. - * @type Ext.Element - * @property btnEl - */ - this.btnEl = btn.child(this.buttonSelector); - this.mon(this.btnEl, { - scope: this, - focus: this.onFocus, - blur: this.onBlur + + 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()); + + // Extract the button and the button wrapping element + Ext.applyIf(me.renderSelectors, { + btnEl : me.href ? 'a' : 'button', + btnWrap: 'em', + btnInnerEl: '.' + me.baseCls + '-inner' }); + + if (me.scale) { + me.ui = me.ui + '-' + me.scale; + } - this.initButtonEl(btn, this.btnEl); + // Render internal structure + me.callParent(arguments); - Ext.ButtonToggleMgr.register(this); - }, + // If it is a split button + has a toolip for the arrow + if (me.split && me.arrowTooltip) { + me.arrowEl.dom[me.tooltipType] = me.arrowTooltip; + } - // private - initButtonEl : function(btn, btnEl){ - this.el = btn; - this.setIcon(this.icon); - this.setText(this.text); - this.setIconClass(this.iconCls); - if(Ext.isDefined(this.tabIndex)){ - btnEl.dom.tabIndex = this.tabIndex; - } - if(this.tooltip){ - this.setTooltip(this.tooltip, true); - } - - if(this.handleMouseEvents){ - this.mon(btn, { - scope: this, - mouseover: this.onMouseOver, - mousedown: this.onMouseDown + // 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); + } + + // Add the mouse events to the button + if (me.handleMouseEvents) { + me.mon(btn, { + scope: me, + mouseover: me.onMouseOver, + mouseout: me.onMouseOut, + mousedown: me.onMouseDown }); - // new functionality for monitoring on the document level - //this.mon(btn, 'mouseout', this.onMouseOut, this); + if (me.split) { + me.mon(btn, { + mousemove: me.onMouseMove, + scope: me + }); + } } - if(this.menu){ - this.mon(this.menu, { - scope: this, - show: this.onMenuShow, - hide: this.onMenuHide + // 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); } - if(this.repeat){ - var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {}); - this.mon(repeater, 'click', this.onClick, this); + // Register the button in the toggle manager + Ext.ButtonToggleManager.register(me); + }, + + /** + * <p>This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} used + * to create this Button's DOM structure.</p> + * <p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide their + * own implementation of this method.</p> + * <p>The default implementation which provides data for the default {@link #template} returns an Object containing the + * following properties:</p><div class="mdetail-params"><ul> + * <li><code>type</code> : The &lt;button&gt;'s {@link #type}</li> + * <li><code>splitCls</code> : 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> + * <li><code>cls</code> : A CSS class name applied to the Button's main &lt;tbody&gt; element which determines the button's scale and icon alignment.</li> + * <li><code>text</code> : The {@link #text} to display ion the Button.</li> + * <li><code>tabIndex</code> : The tab index within the input flow.</li> + * </ul></div> + * @return {Array} Substitution data for a Template. + */ + 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(' '); } - this.mon(btn, this.clickEvent, this.onClick, this); + + return { + href : me.getHref(), + target : me.target || '_blank', + type : me.type, + splitCls : me.getSplitCls(), + cls : me.cls, + text : me.text || '&#160;', + tabIndex : me.tabIndex, + innerSpanStyle: innerSpanStyle + }; + }, + + /** + * @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; + return me.href ? Ext.urlAppend(me.href, me.params + Ext.Object.toQueryString(Ext.apply(Ext.apply({}, me.baseParams)))) : false; + }, + + /** + * <p><b>Only valid if the Button was originally configured with a {@link #url}</b></p> + * <p>Sets the href of the link dynamically according to the params passed, and any {@link #baseParams} configured.</p> + * @param {Object} Parameters to use in the href URL. + */ + setParams: function(p) { + this.params = p; + 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(){ - Ext.Button.superclass.afterRender.call(this); - this.useSetClass = true; - this.setButtonClass(); - this.doc = Ext.getDoc(); - this.doAutoWidth(); + afterRender: function() { + var me = this; + me.useSetClass = true; + me.setButtonCls(); + me.doc = Ext.getDoc(); + this.callParent(arguments); }, - /** - * 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. + /** + * 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} this + * @return {Ext.button.Button} this */ - setIconClass : function(cls){ - this.iconCls = cls; - if(this.el){ - this.btnEl.dom.className = ''; - this.btnEl.addClass(['x-btn-text', cls || '']); - this.setButtonClass(); + setIconCls: function(cls) { + var me = this, + btnInnerEl = me.btnInnerEl; + if (btnInnerEl) { + // Remove the previous iconCls from the button + btnInnerEl.removeCls(me.iconCls); + btnInnerEl.addCls(cls || ''); + me.setButtonCls(); } - return this; + me.iconCls = cls; + return me; }, - /** - * 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.QuickTips#register}.
  • - *
- * @return {Ext.Button} this + /** + * Sets the tooltip for this Button. + * @param {String/Object} tooltip. This may be:<div class="mdesc-details"><ul> + * <li><b>String</b> : A string to be used as innerHTML (html tags are accepted) to show in a tooltip</li> + * <li><b>Object</b> : A configuration object for {@link Ext.tip.QuickTipManager#register}.</li> + * </ul></div> + * @return {Ext.button.Button} this */ - setTooltip : function(tooltip, /* private */ initial){ - if(this.rendered){ - if(!initial){ - this.clearTip(); + setTooltip: function(tooltip, initial) { + var me = this; + + if (me.rendered) { + if (!initial) { + me.clearTip(); } - if(Ext.isObject(tooltip)){ - Ext.QuickTips.register(Ext.apply({ - target: this.btnEl.id - }, tooltip)); - this.tooltip = tooltip; - }else{ - this.btnEl.dom[this.tooltipType] = tooltip; + if (Ext.isObject(tooltip)) { + Ext.tip.QuickTipManager.register(Ext.apply({ + target: me.btnEl.id + }, + tooltip)); + me.tooltip = tooltip; + } else { + me.btnEl.dom.setAttribute('data-' + this.tooltipType, tooltip); } - }else{ - this.tooltip = tooltip; + } else { + me.tooltip = tooltip; } - return this; + return me; }, // private - clearTip : function(){ - if(Ext.isObject(this.tooltip)){ - Ext.QuickTips.unregister(this.btnEl); + getRefItems: function(deep){ + var menu = this.menu, + items; + + if (menu) { + items = menu.getRefItems(deep); + items.unshift(menu); } + return items || []; }, // private - beforeDestroy : function(){ - if(this.rendered){ - this.clearTip(); - } - if(this.menu && this.destroyMenu !== false) { - Ext.destroy(this.menu); + clearTip: function() { + if (Ext.isObject(this.tooltip)) { + Ext.tip.QuickTipManager.unregister(this.btnEl); } - Ext.destroy(this.repeater); }, // private - onDestroy : function(){ - if(this.rendered){ - this.doc.un('mouseover', this.monitorMouseOver, this); - this.doc.un('mouseup', this.onMouseUp, this); - delete this.doc; - delete this.btnEl; - Ext.ButtonToggleMgr.unregister(this); + beforeDestroy: function() { + var me = this; + if (me.rendered) { + me.clearTip(); + } + if (me.menu && me.destroyMenu !== false) { + Ext.destroy(me.btnEl, me.btnInnerEl, me.menu); } - Ext.Button.superclass.onDestroy.call(this); + Ext.destroy(me.repeater); }, // private - doAutoWidth : function(){ - if(this.autoWidth !== false && this.el && this.text && this.width === undefined){ - this.el.setWidth('auto'); - if(Ext.isIE7 && Ext.isStrict){ - var ib = this.btnEl; - if(ib && ib.getWidth() > 20){ - ib.clip(); - ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr')); - } - } - if(this.minWidth){ - if(this.el.getWidth() < this.minWidth){ - this.el.setWidth(this.minWidth); - } - } + 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; + delete me.btnEl; + delete me.btnInnerEl; + Ext.ButtonToggleManager.unregister(me); + + Ext.destroy(me.keyMap); + delete me.keyMap; } + me.callParent(); }, - /** - * Assigns this Button's click handler + /** + * Assigns this Button's click handler * @param {Function} handler The function to call when the button is clicked - * @param {Object} scope (optional) The scope (this reference) in which the handler function is executed. + * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed. * Defaults to this Button. - * @return {Ext.Button} this + * @return {Ext.button.Button} this */ - setHandler : function(handler, scope){ + setHandler: function(handler, scope) { this.handler = handler; this.scope = scope; return this; }, - /** - * Sets this Button's text + /** + * Sets this Button's text * @param {String} text The button text - * @return {Ext.Button} this + * @return {Ext.button.Button} this */ - setText : function(text){ - this.text = text; - if(this.el){ - this.btnEl.update(text || ' '); - this.setButtonClass(); + setText: function(text) { + var me = this; + me.text = text; + if (me.el) { + me.btnInnerEl.update(text || '&#160;'); + me.setButtonCls(); } - this.doAutoWidth(); - return this; + me.doComponentLayout(); + return me; }, - /** - * Sets the background image (inline style) of the button. This method also changes - * the value of the {@link icon} config internally. + /** + * Sets the background image (inline style) of the button. This method also changes + * the value of the {@link #icon} config internally. * @param {String} icon The path to an image to display in the button - * @return {Ext.Button} this + * @return {Ext.button.Button} this */ - setIcon : function(icon){ - this.icon = icon; - if(this.el){ - this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : ''); - this.setButtonClass(); + setIcon: function(icon) { + var me = this, + btnInnerEl = me.btnInnerEl; + me.icon = icon; + if (btnInnerEl) { + btnInnerEl.setStyle('background-image', icon ? 'url(' + icon + ')': ''); + me.setButtonCls(); } - return this; + return me; }, - /** - * Gets the text for this Button + /** + * Gets the text for this Button * @return {String} The button text */ - getText : function(){ + getText: function() { return this.text; }, - /** - * If a state it passed, it becomes the pressed state otherwise the current state is toggled. + /** + * If a state it passed, it becomes the pressed state otherwise the current state is toggled. * @param {Boolean} state (optional) Force a particular state * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method. - * @return {Ext.Button} this + * @return {Ext.button.Button} this */ - toggle : function(state, suppressEvent){ - state = state === undefined ? !this.pressed : !!state; - if(state != this.pressed){ - if(this.rendered){ - this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed'); + toggle: function(state, suppressEvent) { + var me = this; + state = state === undefined ? !me.pressed: !!state; + if (state !== me.pressed) { + if (me.rendered) { + me[state ? 'addClsWithUI': 'removeClsWithUI'](me.pressedCls); } - this.pressed = state; - if(!suppressEvent){ - this.fireEvent('toggle', this, state); - if(this.toggleHandler){ - this.toggleHandler.call(this.scope || this, this, state); - } + me.btnEl.dom.setAttribute('aria-pressed', state); + me.pressed = state; + if (!suppressEvent) { + me.fireEvent('toggle', me, state); + Ext.callback(me.toggleHandler, me.scope || me, [me, state]); } } - return this; - }, - - // private - onDisable : function(){ - this.onDisableChange(true); - }, - - // private - onEnable : function(){ - this.onDisableChange(false); + return me; }, - onDisableChange : function(disabled){ - if(this.el){ - if(!Ext.isIE6 || !this.text){ - this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass); - } - this.el.dom.disabled = disabled; - } - this.disabled = disabled; - }, - - /** - * Show this button's menu (if it has one) + /** + * Show this button's menu (if it has one) */ - showMenu : function(){ - if(this.rendered && this.menu){ - if(this.tooltip){ - Ext.QuickTips.getQuickTip().cancelShow(this.btnEl); + showMenu: function() { + var me = this; + if (me.rendered && me.menu) { + if (me.tooltip) { + Ext.tip.QuickTipManager.getQuickTip().cancelShow(me.btnEl); } - if(this.menu.isVisible()){ - this.menu.hide(); + if (me.menu.isVisible()) { + me.menu.hide(); } - this.menu.ownerCt = this; - this.menu.show(this.el, this.menuAlign); + + me.menu.showBy(me.el, me.menuAlign); } - return this; + return me; }, - /** - * Hide this button's menu (if it has one) + /** + * Hide this button's menu (if it has one) */ - hideMenu : function(){ - if(this.hasVisibleMenu()){ + hideMenu: function() { + if (this.hasVisibleMenu()) { this.menu.hide(); } return this; }, - /** - * Returns true if the button has a menu and it is visible + /** + * Returns true if the button has a menu and it is visible * @return {Boolean} */ - hasVisibleMenu : function(){ - return this.menu && this.menu.ownerCt == this && this.menu.isVisible(); + hasVisibleMenu: function() { + var menu = this.menu; + return menu && menu.rendered && menu.isVisible(); + }, + + // private + onRepeatClick: function(repeat, e) { + this.onClick(e); }, // private - onClick : function(e){ - if(e){ + onClick: function(e) { + var me = this; + if (me.preventDefault || (me.disabled && me.getHref()) && e) { e.preventDefault(); } - if(e.button !== 0){ + if (e.button !== 0) { return; } - if(!this.disabled){ - if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){ - this.toggle(); + if (!me.disabled) { + if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) { + me.toggle(); } - if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){ - this.showMenu(); + if (me.menu && !me.hasVisibleMenu() && !me.ignoreNextClick) { + me.showMenu(); } - this.fireEvent('click', this, e); - if(this.handler){ - //this.el.removeClass('x-btn-over'); - this.handler.call(this.scope || this, this, e); + me.fireEvent('click', me, e); + if (me.handler) { + me.handler.call(me.scope || me, me, e); } + me.onBlur(); } }, - // private - isMenuTriggerOver : function(e, internal){ - return this.menu && !internal; + /** + * @private mouseover handler called when a mouseover event occurs anywhere within the encapsulating element. + * The targets are interrogated to see what is being entered from where. + * @param e + */ + onMouseOver: function(e) { + var me = this; + if (!me.disabled && !e.within(me.el, true, true)) { + me.onMouseEnter(e); + } }, - // private - isMenuTriggerOut : function(e, internal){ - return this.menu && !internal; + /** + * @private mouseout handler called when a mouseout event occurs anywhere within the encapsulating element - + * or the mouse leaves the encapsulating element. + * The targets are interrogated to see what is being exited to where. + * @param e + */ + onMouseOut: function(e) { + var me = this; + if (!e.within(me.el, true, true)) { + if (me.overMenuTrigger) { + me.onMenuTriggerOut(e); + } + me.onMouseLeave(e); + } }, - // private - onMouseOver : function(e){ - if(!this.disabled){ - var internal = e.within(this.el, true); - if(!internal){ - this.el.addClass('x-btn-over'); - if(!this.monitoringMouseOver){ - this.doc.on('mouseover', this.monitorMouseOver, this); - this.monitoringMouseOver = true; - } - this.fireEvent('mouseover', this, e); + /** + * @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(this.isMenuTriggerOver(e, internal)){ - this.fireEvent('menutriggerover', this, this.menu, e); + + if (overlap > (btnSize - me.getTriggerSize())) { + if (!over) { + me.onMenuTriggerOver(e); + } + } else { + if (over) { + me.onMenuTriggerOut(e); + } } } }, - // private - monitorMouseOver : function(e){ - if(e.target != this.el.dom && !e.within(this.el)){ - if(this.monitoringMouseOver){ - this.doc.un('mouseover', this.monitorMouseOver, this); - this.monitoringMouseOver = false; - } - this.onMouseOut(e); + /** + * @private Measures the size of the trigger area for menu and split buttons. Will be a width for + * a right-aligned trigger and a height for a bottom-aligned trigger. Cached after first measurement. + */ + getTriggerSize: function() { + var me = this, + size = me.triggerSize, + side, sideFirstLetter, undef; + + if (size === undef) { + side = me.arrowAlign; + sideFirstLetter = side.charAt(0); + size = me.triggerSize = me.el.getFrameWidth(sideFirstLetter) + me.btnWrap.getFrameWidth(sideFirstLetter) + (me.frameSize && me.frameSize[side] || 0); } + return size; }, - // private - onMouseOut : function(e){ - var internal = e.within(this.el) && e.target != this.el.dom; - this.el.removeClass('x-btn-over'); - this.fireEvent('mouseout', this, e); - if(this.isMenuTriggerOut(e, internal)){ - this.fireEvent('menutriggerout', this, this.menu, e); - } + /** + * @private virtual mouseenter handler called when it is detected that the mouseout event + * signified the mouse entering the encapsulating element. + * @param e + */ + onMouseEnter: function(e) { + var me = this; + me.addClsWithUI(me.overCls); + me.fireEvent('mouseover', me, e); }, - focus : function() { - this.btnEl.focus(); + /** + * @private virtual mouseleave handler called when it is detected that the mouseover event + * signified the mouse entering the encapsulating element. + * @param e + */ + onMouseLeave: function(e) { + var me = this; + me.removeClsWithUI(me.overCls); + me.fireEvent('mouseout', me, e); }, - blur : function() { - this.btnEl.blur(); + /** + * @private virtual mouseenter handler called when it is detected that the mouseover event + * signified the mouse entering the arrow area of the button - the <em>. + * @param e + */ + onMenuTriggerOver: function(e) { + var me = this; + me.overMenuTrigger = true; + me.fireEvent('menutriggerover', me, me.menu, e); }, - // private - onFocus : function(e){ - if(!this.disabled){ - this.el.addClass('x-btn-focus'); + /** + * @private virtual mouseleave handler called when it is detected that the mouseout event + * signified the mouse leaving the arrow area of the button - the <em>. + * @param e + */ + onMenuTriggerOut: function(e) { + var me = this; + delete me.overMenuTrigger; + me.fireEvent('menutriggerout', me, me.menu, e); + }, + + // inherit docs + enable : function(silent) { + var me = this; + + me.callParent(arguments); + + me.removeClsWithUI('disabled'); + + return me; + }, + + // inherit docs + disable : function(silent) { + var me = this; + + me.callParent(arguments); + + me.addClsWithUI('disabled'); + + return me; + }, + + /** + * Method to change the scale of the button. See {@link #scale} for allowed configurations. + * @param {String} scale The scale to change to. + */ + setScale: function(scale) { + var me = this, + ui = me.ui.replace('-' + me.scale, ''); + + //check if it is an allowed scale + if (!Ext.Array.contains(me.allowedScales, scale)) { + throw('#setScale: scale must be an allowed scale (' + me.allowedScales.join(', ') + ')'); } + + me.scale = scale; + me.setUI(ui); }, + + // inherit docs + setUI: function(ui) { + var me = this; + + //we need to append the scale to the UI, if not already done + if (me.scale && !ui.match(me.scale)) { + ui = ui + '-' + me.scale; + } + + me.callParent([ui]); + + // Set all the state classNames, as they need to include the UI + // me.disabledCls += ' ' + me.baseCls + '-' + me.ui + '-disabled'; + }, + // private - onBlur : function(e){ - this.el.removeClass('x-btn-focus'); + onFocus: function(e) { + var me = this; + if (!me.disabled) { + me.addClsWithUI(me.focusCls); + } }, // private - getClickEl : function(e, isUp){ - return this.el; + onBlur: function(e) { + var me = this; + me.removeClsWithUI(me.focusCls); }, // private - onMouseDown : function(e){ - if(!this.disabled && e.button === 0){ - this.getClickEl(e).addClass('x-btn-click'); - this.doc.on('mouseup', this.onMouseUp, this); + onMouseDown: function(e) { + var me = this; + if (!me.disabled && e.button === 0) { + me.addClsWithUI(me.pressedCls); + me.doc.on('mouseup', me.onMouseUp, me); } }, // private - onMouseUp : function(e){ - if(e.button === 0){ - this.getClickEl(e, true).removeClass('x-btn-click'); - this.doc.un('mouseup', this.onMouseUp, this); + onMouseUp: function(e) { + var me = this; + if (e.button === 0) { + if (!me.pressed) { + me.removeClsWithUI(me.pressedCls); + } + me.doc.un('mouseup', me.onMouseUp, me); } }, // private - onMenuShow : function(e){ - if(this.menu.ownerCt == this){ - this.menu.ownerCt = this; - this.ignoreNextClick = 0; - this.el.addClass('x-btn-menu-active'); - this.fireEvent('menushow', this, this.menu); - } + onMenuShow: function(e) { + var me = this; + me.ignoreNextClick = 0; + me.addClsWithUI(me.menuActiveCls); + me.fireEvent('menushow', me, me.menu); }, + // private - onMenuHide : function(e){ - if(this.menu.ownerCt == this){ - this.el.removeClass('x-btn-menu-active'); - this.ignoreNextClick = this.restoreClick.defer(250, this); - this.fireEvent('menuhide', this, this.menu); - delete this.menu.ownerCt; - } + onMenuHide: function(e) { + var me = this; + me.removeClsWithUI(me.menuActiveCls); + me.ignoreNextClick = Ext.defer(me.restoreClick, 250, me); + me.fireEvent('menuhide', me, me.menu); }, // private - restoreClick : function(){ + restoreClick: function() { this.ignoreNextClick = 0; - } + }, - /** - * @cfg {String} autoEl @hide - */ - /** - * @cfg {String/Object} html @hide - */ - /** - * @cfg {String} contentEl @hide - */ - /** - * @cfg {Mixed} data @hide - */ - /** - * @cfg {Mixed} tpl @hide - */ - /** - * @cfg {String} tplWriteMode @hide + // private + onDownKey: function() { + var me = this; + + if (!me.disabled) { + if (me.menu) { + me.showMenu(); + } + } + }, + + /** + * @private Some browsers (notably Safari and older Chromes on Windows) add extra "padding" inside the button + * element that cannot be removed. This method returns the size of that padding with a one-time detection. + * @return Array [top, right, bottom, left] */ -}); -Ext.reg('button', Ext.Button); - -// Private utility class used by Button -Ext.ButtonToggleMgr = function(){ - var groups = {}; - - function toggleGroup(btn, state){ - if(state){ - var g = groups[btn.toggleGroup]; - for(var i = 0, l = g.length; i < l; i++){ - if(g[i] != btn){ - g[i].toggle(false); - } - } - } - } - - return { - register : function(btn){ - if(!btn.toggleGroup){ - return; - } - var g = groups[btn.toggleGroup]; - if(!g){ - g = groups[btn.toggleGroup] = []; - } - g.push(btn); - btn.on('toggle', toggleGroup); - }, - - unregister : function(btn){ - if(!btn.toggleGroup){ - return; - } - var g = groups[btn.toggleGroup]; - if(g){ - g.remove(btn); - btn.un('toggle', toggleGroup); - } - }, - - /** - * Gets the pressed button in the passed group or null + 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 = {}, + g, i, l; + + function toggleGroup(btn, state) { + if (state) { + g = groups[btn.toggleGroup]; + for (i = 0, l = g.length; i < l; i++) { + if (g[i] !== btn) { + g[i].toggle(false); + } + } + } + } + // Private utility class used by Button + Ext.ButtonToggleManager = { + register: function(btn) { + if (!btn.toggleGroup) { + return; + } + var group = groups[btn.toggleGroup]; + if (!group) { + group = groups[btn.toggleGroup] = []; + } + group.push(btn); + btn.on('toggle', toggleGroup); + }, + + unregister: function(btn) { + if (!btn.toggleGroup) { + return; + } + var group = groups[btn.toggleGroup]; + if (group) { + Ext.Array.remove(group, btn); + btn.un('toggle', toggleGroup); + } + }, + + /** + * Gets the pressed button in the passed group or null * @param {String} group * @return Button */ - getPressed : function(group){ - var g = groups[group]; - if(g){ - for(var i = 0, len = g.length; i < len; i++){ - if(g[i].pressed === true){ - return g[i]; - } - } - } - return null; - } - }; -}(); -
- - \ No newline at end of file + 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; + } + }; +}); +
\ No newline at end of file