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

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
Button.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：25k
源码类别：

中间件编程

开发平台：

JavaScript

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