开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > JavaScript > 查看源码
Button.js
资源名称：ext-3.1.0.zip　[点击查看]
上传用户：dawnssy
上传日期：2022-08-06
资源大小：9345k
文件大小：27k
源码类别：

JavaScript

开发平台：

JavaScript

Button.js：源码内容
  1. /*!  * Ext JS Library 3.1.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.Button
  3.  * @extends Ext.BoxComponent
  4.  * Simple Button class
  5.  * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
  6.  * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
  7.  * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
  8.  * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
  9.  * The handler is passed the following parameters:<div class="mdetail-params"><ul>
  10.  * <li><code>b</code> : Button<div class="sub-desc">This Button.</div></li>
  11.  * <li><code>e</code> : EventObject<div class="sub-desc">The click event.</div></li>
  12.  * </ul></div>
  13.  * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
  14.  * See also {@link Ext.Panel}.<tt>{@link Ext.Panel#minButtonWidth minButtonWidth}</tt>.
  15.  * @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
  16.  * @cfg {Boolean} hidden True to start hidden (defaults to false)
  17.  * @cfg {Boolean} disabled True to start disabled (defaults to false)
  18.  * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
  19.  * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
  20.  * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
  21.  * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
  22.  * @constructor
  23.  * Create a new button
  24.  * @param {Object} config The config object
  25.  * @xtype button
  26.  */
  27. Ext.Button = Ext.extend(Ext.BoxComponent, {
  28.     /**
  29.      * Read-only. True if this button is hidden
  30.      * @type Boolean
  31.      */
  32.     hidden : false,
  33.     /**
  34.      * Read-only. True if this button is disabled
  35.      * @type Boolean
  36.      */
  37.     disabled : false,
  38.     /**
  39.      * Read-only. True if this button is pressed (only if enableToggle = true)
  40.      * @type Boolean
  41.      */
  42.     pressed : false,
  44.     /**
  45.      * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
  46.      */
  48.     /**
  49.      * @cfg {Boolean} allowDepress
  50.      * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
  51.      */
  53.     /**
  54.      * @cfg {Boolean} enableToggle
  55.      * True to enable pressed/not pressed toggling (defaults to false)
  56.      */
  57.     enableToggle : false,
  58.     /**
  59.      * @cfg {Function} toggleHandler
  60.      * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:<ul class="mdetail-params">
  61.      * <li><b>button</b> : Ext.Button<div class="sub-desc">this Button object</div></li>
  62.      * <li><b>state</b> : Boolean<div class="sub-desc">The next state of the Button, true means pressed.</div></li>
  63.      * </ul>
  64.      */
  65.     /**
  66.      * @cfg {Mixed} menu
  67.      * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
  68.      */
  69.     /**
  70.      * @cfg {String} menuAlign
  71.      * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
  72.      */
  73.     menuAlign : 'tl-bl?',
  75.     /**
  76.      * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the
  77.      * text to be used if this item is shown in the overflow menu. See also
  78.      * {@link Ext.Toolbar.Item}.<code>{@link Ext.Toolbar.Item#overflowText overflowText}</code>.
  79.      */
  80.     /**
  81.      * @cfg {String} iconCls
  82.      * A css class which sets a background image to be used as the icon for this button
  83.      */
  84.     /**
  85.      * @cfg {String} type
  86.      * submit, reset or button - defaults to 'button'
  87.      */
  88.     type : 'button',
  90.     // private
  91.     menuClassTarget : 'tr:nth(2)',
  93.     /**
  94.      * @cfg {String} clickEvent
  95.      * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu).
  96.      * Defaults to <tt>'click'</tt>.
  97.      */
  98.     clickEvent : 'click',
  100.     /**
  101.      * @cfg {Boolean} handleMouseEvents
  102.      * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
  103.      */
  104.     handleMouseEvents : true,
  106.     /**
  107.      * @cfg {String} tooltipType
  108.      * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
  109.      */
  110.     tooltipType : 'qtip',
  112.     /**
  113.      * @cfg {String} buttonSelector
  114.      * <p>(Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the
  115.      * DOM structure created.</p>
  116.      * <p>When a custom {@link #template} is used, you  must ensure that this selector results in the selection of
  117.      * a focussable element.</p>
  118.      * <p>Defaults to <b><tt>'button:first-child'</tt></b>.</p>
  119.      */
  120.     buttonSelector : 'button:first-child',
  122.     /**
  123.      * @cfg {String} scale
  124.      * <p>(Optional) The size of the Button. Three values are allowed:</p>
  125.      * <ul class="mdetail-params">
  126.      * <li>'small'<div class="sub-desc">Results in the button element being 16px high.</div></li>
  127.      * <li>'medium'<div class="sub-desc">Results in the button element being 24px high.</div></li>
  128.      * <li>'large'<div class="sub-desc">Results in the button element being 32px high.</div></li>
  129.      * </ul>
  130.      * <p>Defaults to <b><tt>'small'</tt></b>.</p>
  131.      */
  132.     scale : 'small',
  134.     /**
  135.      * @cfg {Object} scope The scope (<tt><b>this</b></tt> reference) in which the
  136.      * <code>{@link #handler}</code> and <code>{@link #toggleHandler}</code> is
  137.      * executed. Defaults to this Button.
  138.      */
  140.     /**
  141.      * @cfg {String} iconAlign
  142.      * <p>(Optional) The side of the Button box to render the icon. Four values are allowed:</p>
  143.      * <ul class="mdetail-params">
  144.      * <li>'top'<div class="sub-desc"></div></li>
  145.      * <li>'right'<div class="sub-desc"></div></li>
  146.      * <li>'bottom'<div class="sub-desc"></div></li>
  147.      * <li>'left'<div class="sub-desc"></div></li>
  148.      * </ul>
  149.      * <p>Defaults to <b><tt>'left'</tt></b>.</p>
  150.      */
  151.     iconAlign : 'left',
  153.     /**
  154.      * @cfg {String} arrowAlign
  155.      * <p>(Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.
  156.      * Two values are allowed:</p>
  157.      * <ul class="mdetail-params">
  158.      * <li>'right'<div class="sub-desc"></div></li>
  159.      * <li>'bottom'<div class="sub-desc"></div></li>
  160.      * </ul>
  161.      * <p>Defaults to <b><tt>'right'</tt></b>.</p>
  162.      */
  163.     arrowAlign : 'right',
  165.     /**
  166.      * @cfg {Ext.Template} template (Optional)
  167.      * <p>A {@link Ext.Template Template} used to create the Button's DOM structure.</p>
  168.      * Instances, or subclasses which need a different DOM structure may provide a different
  169.      * template layout in conjunction with an implementation of {@link #getTemplateArgs}.
  170.      * @type Ext.Template
  171.      * @property template
  172.      */
  173.     /**
  174.      * @cfg {String} cls
  175.      * A CSS class string to apply to the button's main element.
  176.      */
  177.     /**
  178.      * @property menu
  179.      * @type Menu
  180.      * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
  181.      */
  183.     initComponent : function(){
  184.         Ext.Button.superclass.initComponent.call(this);
  186.         this.addEvents(
  187.             /**
  188.              * @event click
  189.              * Fires when this button is clicked
  190.              * @param {Button} this
  191.              * @param {EventObject} e The click event
  192.              */
  193.             'click',
  194.             /**
  195.              * @event toggle
  196.              * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
  197.              * @param {Button} this
  198.              * @param {Boolean} pressed
  199.              */
  200.             'toggle',
  201.             /**
  202.              * @event mouseover
  203.              * Fires when the mouse hovers over the button
  204.              * @param {Button} this
  205.              * @param {Event} e The event object
  206.              */
  207.             'mouseover',
  208.             /**
  209.              * @event mouseout
  210.              * Fires when the mouse exits the button
  211.              * @param {Button} this
  212.              * @param {Event} e The event object
  213.              */
  214.             'mouseout',
  215.             /**
  216.              * @event menushow
  217.              * If this button has a menu, this event fires when it is shown
  218.              * @param {Button} this
  219.              * @param {Menu} menu
  220.              */
  221.             'menushow',
  222.             /**
  223.              * @event menuhide
  224.              * If this button has a menu, this event fires when it is hidden
  225.              * @param {Button} this
  226.              * @param {Menu} menu
  227.              */
  228.             'menuhide',
  229.             /**
  230.              * @event menutriggerover
  231.              * If this button has a menu, this event fires when the mouse enters the menu triggering element
  232.              * @param {Button} this
  233.              * @param {Menu} menu
  234.              * @param {EventObject} e
  235.              */
  236.             'menutriggerover',
  237.             /**
  238.              * @event menutriggerout
  239.              * If this button has a menu, this event fires when the mouse leaves the menu triggering element
  240.              * @param {Button} this
  241.              * @param {Menu} menu
  242.              * @param {EventObject} e
  243.              */
  244.             'menutriggerout'
  245.         );
  246.         if(this.menu){
  247.             this.menu = Ext.menu.MenuMgr.get(this.menu);
  248.         }
  249.         if(Ext.isString(this.toggleGroup)){
  250.             this.enableToggle = true;
  251.         }
  252.     },
  254. /**
  255.   * <p>This method returns an Array which provides substitution parameters for the {@link #template Template} used
  256.   * to create this Button's DOM structure.</p>
  257.   * <p>Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
  258.   * own implementation of this method.</p>
  259.   * <p>The default implementation which provides data for the default {@link #template} returns an Array containing the
  260.   * following items:</p><div class="mdetail-params"><ul>
  261.   * <li>The &lt;button&gt;'s {@link #type}</li>
  262.   * <li>A CSS class name applied to the Button's main &lt;tbody&gt; element which determines the button's scale and icon alignment.</li>
  263.   * <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>
  264.   * <li>The {@link #cls} CSS class name applied to the button's wrapping &lt;table&gt; element.</li>
  265.   * <li>The Component id which is applied to the button's wrapping &lt;table&gt; element.</li>
  266.   * </ul></div>
  267.   * @return {Array} Substitution data for a Template.
  268.  */
  269.     getTemplateArgs : function(){
  270.         return [this.type, 'x-btn-' + this.scale + ' x-btn-icon-' + this.scale + '-' + this.iconAlign, this.getMenuClass(), this.cls, this.id];
  271.     },
  273.     // private
  274.     setButtonClass : function(){
  275.         if(this.useSetClass){
  276.             if(!Ext.isEmpty(this.oldCls)){
  277.                 this.el.removeClass([this.oldCls, 'x-btn-pressed']);
  278.             }
  279.             this.oldCls = (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon';
  280.             this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]);
  281.         }
  282.     },
  284.     // protected
  285.     getMenuClass : function(){
  286.         return this.menu ? (this.arrowAlign != 'bottom' ? 'x-btn-arrow' : 'x-btn-arrow-bottom') : '';
  287.     },
  289.     // private
  290.     onRender : function(ct, position){
  291.         if(!this.template){
  292.             if(!Ext.Button.buttonTemplate){
  293.                 // hideous table template
  294.                 Ext.Button.buttonTemplate = new Ext.Template(
  295.                     '<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
  296.                     '<tr><td class="x-btn-tl"><i>&#160;</i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i>&#160;</i></td></tr>',
  297.                     '<tr><td class="x-btn-ml"><i>&#160;</i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button type="{0}"></button></em></td><td class="x-btn-mr"><i>&#160;</i></td></tr>',
  298.                     '<tr><td class="x-btn-bl"><i>&#160;</i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i>&#160;</i></td></tr>',
  299.                     '</tbody></table>');
  300.                 Ext.Button.buttonTemplate.compile();
  301.             }
  302.             this.template = Ext.Button.buttonTemplate;
  303.         }
  305.         var btn, targs = this.getTemplateArgs();
  307.         if(position){
  308.             btn = this.template.insertBefore(position, targs, true);
  309.         }else{
  310.             btn = this.template.append(ct, targs, true);
  311.         }
  312.         /**
  313.          * An {@link Ext.Element Element} encapsulating the Button's clickable element. By default,
  314.          * this references a <tt>&lt;button&gt;</tt> element. Read only.
  315.          * @type Ext.Element
  316.          * @property btnEl
  317.          */
  318.         this.btnEl = btn.child(this.buttonSelector);
  319.         this.mon(this.btnEl, {
  320.             scope: this,
  321.             focus: this.onFocus,
  322.             blur: this.onBlur
  323.         });
  325.         this.initButtonEl(btn, this.btnEl);
  327.         Ext.ButtonToggleMgr.register(this);
  328.     },
  330.     // private
  331.     initButtonEl : function(btn, btnEl){
  332.         this.el = btn;
  333.         this.setIcon(this.icon);
  334.         this.setText(this.text);
  335.         this.setIconClass(this.iconCls);
  336.         if(Ext.isDefined(this.tabIndex)){
  337.             btnEl.dom.tabIndex = this.tabIndex;
  338.         }
  339.         if(this.tooltip){
  340.             this.setTooltip(this.tooltip, true);
  341.         }
  343.         if(this.handleMouseEvents){
  344.             this.mon(btn, {
  345.                 scope: this,
  346.                 mouseover: this.onMouseOver,
  347.                 mousedown: this.onMouseDown
  348.             });
  350.             // new functionality for monitoring on the document level
  351.             //this.mon(btn, 'mouseout', this.onMouseOut, this);
  352.         }
  354.         if(this.menu){
  355.             this.mon(this.menu, {
  356.                 scope: this,
  357.                 show: this.onMenuShow,
  358.                 hide: this.onMenuHide
  359.             });
  360.         }
  362.         if(this.repeat){
  363.             var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});
  364.             this.mon(repeater, 'click', this.onClick, this);
  365.         }
  366.         this.mon(btn, this.clickEvent, this.onClick, this);
  367.     },
  369.     // private
  370.     afterRender : function(){
  371.         Ext.Button.superclass.afterRender.call(this);
  372.         this.useSetClass = true;
  373.         this.setButtonClass();
  374.         this.doc = Ext.getDoc();
  375.         this.doAutoWidth();
  376.     },
  378.     /**
  379.      * Sets the CSS class that provides a background image to use as the button's icon.  This method also changes
  380.      * the value of the {@link iconCls} config internally.
  381.      * @param {String} cls The CSS class providing the icon image
  382.      * @return {Ext.Button} this
  383.      */
  384.     setIconClass : function(cls){
  385.         this.iconCls = cls;
  386.         if(this.el){
  387.             this.btnEl.dom.className = '';
  388.             this.btnEl.addClass(['x-btn-text', cls || '']);
  389.             this.setButtonClass();
  390.         }
  391.         return this;
  392.     },
  394.     /**
  395.      * Sets the tooltip for this Button.
  396.      * @param {String/Object} tooltip. This may be:<div class="mdesc-details"><ul>
  397.      * <li><b>String</b> : A string to be used as innerHTML (html tags are accepted) to show in a tooltip</li>
  398.      * <li><b>Object</b> : A configuration object for {@link Ext.QuickTips#register}.</li>
  399.      * </ul></div>
  400.      * @return {Ext.Button} this
  401.      */
  402.     setTooltip : function(tooltip, /* private */ initial){
  403.         if(this.rendered){
  404.             if(!initial){
  405.                 this.clearTip();
  406.             }
  407.             if(Ext.isObject(tooltip)){
  408.                 Ext.QuickTips.register(Ext.apply({
  409.                       target: this.btnEl.id
  410.                 }, tooltip));
  411.                 this.tooltip = tooltip;
  412.             }else{
  413.                 this.btnEl.dom[this.tooltipType] = tooltip;
  414.             }
  415.         }else{
  416.             this.tooltip = tooltip;
  417.         }
  418.         return this;
  419.     },
  421.     // private
  422.     clearTip : function(){
  423.         if(Ext.isObject(this.tooltip)){
  424.             Ext.QuickTips.unregister(this.btnEl);
  425.         }
  426.     },
  428.     // private
  429.     beforeDestroy : function(){
  430.         if(this.rendered){
  431.             this.clearTip();
  432.         }
  433.         if(this.menu && this.menu.autoDestroy) {
  434.             Ext.destroy(this.menu);
  435.         }
  436.         Ext.destroy(this.repeater);
  437.     },
  439.     // private
  440.     onDestroy : function(){
  441.         if(this.rendered){
  442.             this.doc.un('mouseover', this.monitorMouseOver, this);
  443.             this.doc.un('mouseup', this.onMouseUp, this);
  444.             delete this.doc;
  445.             delete this.btnEl;
  446.             Ext.ButtonToggleMgr.unregister(this);
  447.         }
  448.     },
  450.     // private
  451.     doAutoWidth : function(){
  452.         if(this.el && this.text && this.width === undefined){
  453.             this.el.setWidth('auto');
  454.             if(Ext.isIE7 && Ext.isStrict){
  455.                 var ib = this.btnEl;
  456.                 if(ib && ib.getWidth() > 20){
  457.                     ib.clip();
  458.                     ib.setWidth(Ext.util.TextMetrics.measure(ib, this.text).width+ib.getFrameWidth('lr'));
  459.                 }
  460.             }
  461.             if(this.minWidth){
  462.                 if(this.el.getWidth() < this.minWidth){
  463.                     this.el.setWidth(this.minWidth);
  464.                 }
  465.             }
  466.         }
  467.     },
  469.     /**
  470.      * Assigns this Button's click handler
  471.      * @param {Function} handler The function to call when the button is clicked
  472.      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
  473.      * Defaults to this Button.
  474.      * @return {Ext.Button} this
  475.      */
  476.     setHandler : function(handler, scope){
  477.         this.handler = handler;
  478.         this.scope = scope;
  479.         return this;
  480.     },
  482.     /**
  483.      * Sets this Button's text
  484.      * @param {String} text The button text
  485.      * @return {Ext.Button} this
  486.      */
  487.     setText : function(text){
  488.         this.text = text;
  489.         if(this.el){
  490.             this.btnEl.update(text || '&#160;');
  491.             this.setButtonClass();
  492.         }
  493.         this.doAutoWidth();
  494.         return this;
  495.     },
  497.     /**
  498.      * Sets the background image (inline style) of the button.  This method also changes
  499.      * the value of the {@link icon} config internally.
  500.      * @param {String} icon The path to an image to display in the button
  501.      * @return {Ext.Button} this
  502.      */
  503.     setIcon : function(icon){
  504.         this.icon = icon;
  505.         if(this.el){
  506.             this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
  507.             this.setButtonClass();
  508.         }
  509.         return this;
  510.     },
  512.     /**
  513.      * Gets the text for this Button
  514.      * @return {String} The button text
  515.      */
  516.     getText : function(){
  517.         return this.text;
  518.     },
  520.     /**
  521.      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
  522.      * @param {Boolean} state (optional) Force a particular state
  523.      * @param {Boolean} supressEvent (optional) True to stop events being fired when calling this method.
  524.      * @return {Ext.Button} this
  525.      */
  526.     toggle : function(state, suppressEvent){
  527.         state = state === undefined ? !this.pressed : !!state;
  528.         if(state != this.pressed){
  529.             if(this.rendered){
  530.                 this.el[state ? 'addClass' : 'removeClass']('x-btn-pressed');
  531.             }
  532.             this.pressed = state;
  533.             if(!suppressEvent){
  534.                 this.fireEvent('toggle', this, state);
  535.                 if(this.toggleHandler){
  536.                     this.toggleHandler.call(this.scope || this, this, state);
  537.                 }
  538.             }
  539.         }
  540.         return this;
  541.     },
  543.     /**
  544.      * Focus the button
  545.      */
  546.     focus : function(){
  547.         this.btnEl.focus();
  548.     },
  550.     // private
  551.     onDisable : function(){
  552.         this.onDisableChange(true);
  553.     },
  555.     // private
  556.     onEnable : function(){
  557.         this.onDisableChange(false);
  558.     },
  560.     onDisableChange : function(disabled){
  561.         if(this.el){
  562.             if(!Ext.isIE6 || !this.text){
  563.                 this.el[disabled ? 'addClass' : 'removeClass'](this.disabledClass);
  564.             }
  565.             this.el.dom.disabled = disabled;
  566.         }
  567.         this.disabled = disabled;
  568.     },
  570.     /**
  571.      * Show this button's menu (if it has one)
  572.      */
  573.     showMenu : function(){
  574.         if(this.rendered && this.menu){
  575.             if(this.tooltip){
  576.                 Ext.QuickTips.getQuickTip().cancelShow(this.btnEl);
  577.             }
  578.             this.menu.show(this.el, this.menuAlign);
  579.         }
  580.         return this;
  581.     },
  583.     /**
  584.      * Hide this button's menu (if it has one)
  585.      */
  586.     hideMenu : function(){
  587.         if(this.menu){
  588.             this.menu.hide();
  589.         }
  590.         return this;
  591.     },
  593.     /**
  594.      * Returns true if the button has a menu and it is visible
  595.      * @return {Boolean}
  596.      */
  597.     hasVisibleMenu : function(){
  598.         return this.menu && this.menu.isVisible();
  599.     },
  601.     // private
  602.     onClick : function(e){
  603.         if(e){
  604.             e.preventDefault();
  605.         }
  606.         if(e.button !== 0){
  607.             return;
  608.         }
  609.         if(!this.disabled){
  610.             if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){
  611.                 this.toggle();
  612.             }
  613.             if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
  614.                 this.showMenu();
  615.             }
  616.             this.fireEvent('click', this, e);
  617.             if(this.handler){
  618.                 //this.el.removeClass('x-btn-over');
  619.                 this.handler.call(this.scope || this, this, e);
  620.             }
  621.         }
  622.     },
  624.     // private
  625.     isMenuTriggerOver : function(e, internal){
  626.         return this.menu && !internal;
  627.     },
  629.     // private
  630.     isMenuTriggerOut : function(e, internal){
  631.         return this.menu && !internal;
  632.     },
  634.     // private
  635.     onMouseOver : function(e){
  636.         if(!this.disabled){
  637.             var internal = e.within(this.el,  true);
  638.             if(!internal){
  639.                 this.el.addClass('x-btn-over');
  640.                 if(!this.monitoringMouseOver){
  641.                     this.doc.on('mouseover', this.monitorMouseOver, this);
  642.                     this.monitoringMouseOver = true;
  643.                 }
  644.                 this.fireEvent('mouseover', this, e);
  645.             }
  646.             if(this.isMenuTriggerOver(e, internal)){
  647.                 this.fireEvent('menutriggerover', this, this.menu, e);
  648.             }
  649.         }
  650.     },
  652.     // private
  653.     monitorMouseOver : function(e){
  654.         if(e.target != this.el.dom && !e.within(this.el)){
  655.             if(this.monitoringMouseOver){
  656.                 this.doc.un('mouseover', this.monitorMouseOver, this);
  657.                 this.monitoringMouseOver = false;
  658.             }
  659.             this.onMouseOut(e);
  660.         }
  661.     },
  663.     // private
  664.     onMouseOut : function(e){
  665.         var internal = e.within(this.el) && e.target != this.el.dom;
  666.         this.el.removeClass('x-btn-over');
  667.         this.fireEvent('mouseout', this, e);
  668.         if(this.isMenuTriggerOut(e, internal)){
  669.             this.fireEvent('menutriggerout', this, this.menu, e);
  670.         }
  671.     },
  673.     focus : function() {
  674.         this.btnEl.focus();
  675.     },
  677.     blur : function() {
  678.         this.btnEl.blur();
  679.     },
  681.     // private
  682.     onFocus : function(e){
  683.         if(!this.disabled){
  684.             this.el.addClass('x-btn-focus');
  685.         }
  686.     },
  687.     // private
  688.     onBlur : function(e){
  689.         this.el.removeClass('x-btn-focus');
  690.     },
  692.     // private
  693.     getClickEl : function(e, isUp){
  694.        return this.el;
  695.     },
  697.     // private
  698.     onMouseDown : function(e){
  699.         if(!this.disabled && e.button === 0){
  700.             this.getClickEl(e).addClass('x-btn-click');
  701.             this.doc.on('mouseup', this.onMouseUp, this);
  702.         }
  703.     },
  704.     // private
  705.     onMouseUp : function(e){
  706.         if(e.button === 0){
  707.             this.getClickEl(e, true).removeClass('x-btn-click');
  708.             this.doc.un('mouseup', this.onMouseUp, this);
  709.         }
  710.     },
  711.     // private
  712.     onMenuShow : function(e){
  713.         this.menu.ownerCt = this;
  714.         this.ignoreNextClick = 0;
  715.         this.el.addClass('x-btn-menu-active');
  716.         this.fireEvent('menushow', this, this.menu);
  717.     },
  718.     // private
  719.     onMenuHide : function(e){
  720.         this.el.removeClass('x-btn-menu-active');
  721.         this.ignoreNextClick = this.restoreClick.defer(250, this);
  722.         this.fireEvent('menuhide', this, this.menu);
  723.         delete this.menu.ownerCt;
  724.     },
  726.     // private
  727.     restoreClick : function(){
  728.         this.ignoreNextClick = 0;
  729.     }
  731.     /**
  732.      * @cfg {String} autoEl @hide
  733.      */
  734. });
  735. Ext.reg('button', Ext.Button);
  737. // Private utility class used by Button
  738. Ext.ButtonToggleMgr = function(){
  739.    var groups = {};
  741.    function toggleGroup(btn, state){
  742.        if(state){
  743.            var g = groups[btn.toggleGroup];
  744.            for(var i = 0, l = g.length; i < l; i++){
  745.                if(g[i] != btn){
  746.                    g[i].toggle(false);
  747.                }
  748.            }
  749.        }
  750.    }
  752.    return {
  753.        register : function(btn){
  754.            if(!btn.toggleGroup){
  755.                return;
  756.            }
  757.            var g = groups[btn.toggleGroup];
  758.            if(!g){
  759.                g = groups[btn.toggleGroup] = [];
  760.            }
  761.            g.push(btn);
  762.            btn.on('toggle', toggleGroup);
  763.        },
  765.        unregister : function(btn){
  766.            if(!btn.toggleGroup){
  767.                return;
  768.            }
  769.            var g = groups[btn.toggleGroup];
  770.            if(g){
  771.                g.remove(btn);
  772.                btn.un('toggle', toggleGroup);
  773.            }
  774.        },
  776.        /**
  777.         * Gets the pressed button in the passed group or null
  778.         * @param {String} group
  779.         * @return Button
  780.         */
  781.        getPressed : function(group){
  782.            var g = groups[group];
  783.            if(g){
  784.                for(var i = 0, len = g.length; i < len; i++){
  785.                    if(g[i].pressed === true){
  786.                        return g[i];
  787.                    }
  788.                }
  789.            }
  790.            return null;
  791.        }
  792.    };
  793. }();