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

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

JavaScript

开发平台：

JavaScript

pkg-buttons-debug.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. }();
  794. /**
  795.  * @class Ext.SplitButton
  796.  * @extends Ext.Button
  797.  * A split button that provides a built-in dropdown arrow that can fire an event separately from the default
  798.  * click event of the button.  Typically this would be used to display a dropdown menu that provides additional
  799.  * options to the primary button action, but any custom handler can provide the arrowclick implementation.  Example usage:
  800.  * <pre><code>
  801. // display a dropdown menu:
  802. new Ext.SplitButton({
  803. renderTo: 'button-ct', // the container id
  804.     text: 'Options',
  805.     handler: optionsHandler, // handle a click on the button itself
  806.     menu: new Ext.menu.Menu({
  807.         items: [
  808.          // these items will render as dropdown menu items when the arrow is clicked:
  809.         {text: 'Item 1', handler: item1Handler},
  810.         {text: 'Item 2', handler: item2Handler}
  811.         ]
  812.     })
  813. });
  815. // Instead of showing a menu, you provide any type of custom
  816. // functionality you want when the dropdown arrow is clicked:
  817. new Ext.SplitButton({
  818. renderTo: 'button-ct',
  819.     text: 'Options',
  820.     handler: optionsHandler,
  821.     arrowHandler: myCustomHandler
  822. });
  823. </code></pre>
  824.  * @cfg {Function} arrowHandler A function called when the arrow button is clicked (can be used instead of click event)
  825.  * @cfg {String} arrowTooltip The title attribute of the arrow
  826.  * @constructor
  827.  * Create a new menu button
  828.  * @param {Object} config The config object
  829.  * @xtype splitbutton
  830.  */
  831. Ext.SplitButton = Ext.extend(Ext.Button, {
  832. // private
  833.     arrowSelector : 'em',
  834.     split: true,
  836.     // private
  837.     initComponent : function(){
  838.         Ext.SplitButton.superclass.initComponent.call(this);
  839.         /**
  840.          * @event arrowclick
  841.          * Fires when this button's arrow is clicked
  842.          * @param {MenuButton} this
  843.          * @param {EventObject} e The click event
  844.          */
  845.         this.addEvents("arrowclick");
  846.     },
  848.     // private
  849.     onRender : function(){
  850.         Ext.SplitButton.superclass.onRender.apply(this, arguments);
  851.         if(this.arrowTooltip){
  852.             this.el.child(this.arrowSelector).dom[this.tooltipType] = this.arrowTooltip;
  853.         }
  854.     },
  856.     /**
  857.      * Sets this button's arrow click handler.
  858.      * @param {Function} handler The function to call when the arrow is clicked
  859.      * @param {Object} scope (optional) Scope for the function passed above
  860.      */
  861.     setArrowHandler : function(handler, scope){
  862.         this.arrowHandler = handler;
  863.         this.scope = scope;
  864.     },
  866.     getMenuClass : function(){
  867.         return 'x-btn-split' + (this.arrowAlign == 'bottom' ? '-bottom' : '');
  868.     },
  870.     isClickOnArrow : function(e){
  871. if (this.arrowAlign != 'bottom') {
  872.     var visBtn = this.el.child('em.x-btn-split');
  873.     var right = visBtn.getRegion().right - visBtn.getPadding('r');
  874.     return e.getPageX() > right;
  875. } else {
  876.     return e.getPageY() > this.btnEl.getRegion().bottom;
  877. }
  878.     },
  880.     // private
  881.     onClick : function(e, t){
  882.         e.preventDefault();
  883.         if(!this.disabled){
  884.             if(this.isClickOnArrow(e)){
  885.                 if(this.menu && !this.menu.isVisible() && !this.ignoreNextClick){
  886.                     this.showMenu();
  887.                 }
  888.                 this.fireEvent("arrowclick", this, e);
  889.                 if(this.arrowHandler){
  890.                     this.arrowHandler.call(this.scope || this, this, e);
  891.                 }
  892.             }else{
  893.                 if(this.enableToggle){
  894.                     this.toggle();
  895.                 }
  896.                 this.fireEvent("click", this, e);
  897.                 if(this.handler){
  898.                     this.handler.call(this.scope || this, this, e);
  899.                 }
  900.             }
  901.         }
  902.     },
  904.     // private
  905.     isMenuTriggerOver : function(e){
  906.         return this.menu && e.target.tagName == this.arrowSelector;
  907.     },
  909.     // private
  910.     isMenuTriggerOut : function(e, internal){
  911.         return this.menu && e.target.tagName != this.arrowSelector;
  912.     }
  913. });
  915. Ext.reg('splitbutton', Ext.SplitButton);/**
  916.  * @class Ext.CycleButton
  917.  * @extends Ext.SplitButton
  918.  * A specialized SplitButton that contains a menu of {@link Ext.menu.CheckItem} elements.  The button automatically
  919.  * cycles through each menu item on click, raising the button's {@link #change} event (or calling the button's
  920.  * {@link #changeHandler} function, if supplied) for the active menu item. Clicking on the arrow section of the
  921.  * button displays the dropdown menu just like a normal SplitButton.  Example usage:
  922.  * <pre><code>
  923. var btn = new Ext.CycleButton({
  924.     showText: true,
  925.     prependText: 'View as ',
  926.     items: [{
  927.         text:'text only',
  928.         iconCls:'view-text',
  929.         checked:true
  930.     },{
  931.         text:'HTML',
  932.         iconCls:'view-html'
  933.     }],
  934.     changeHandler:function(btn, item){
  935.         Ext.Msg.alert('Change View', item.text);
  936.     }
  937. });
  938. </code></pre>
  939.  * @constructor
  940.  * Create a new split button
  941.  * @param {Object} config The config object
  942.  * @xtype cycle
  943.  */
  944. Ext.CycleButton = Ext.extend(Ext.SplitButton, {
  945.     /**
  946.      * @cfg {Array} items An array of {@link Ext.menu.CheckItem} <b>config</b> objects to be used when creating the
  947.      * button's menu items (e.g., {text:'Foo', iconCls:'foo-icon'})
  948.      */
  949.     /**
  950.      * @cfg {Boolean} showText True to display the active item's text as the button text (defaults to false)
  951.      */
  952.     /**
  953.      * @cfg {String} prependText A static string to prepend before the active item's text when displayed as the
  954.      * button's text (only applies when showText = true, defaults to '')
  955.      */
  956.     /**
  957.      * @cfg {Function} changeHandler A callback function that will be invoked each time the active menu
  958.      * item in the button's menu has changed.  If this callback is not supplied, the SplitButton will instead
  959.      * fire the {@link #change} event on active item change.  The changeHandler function will be called with the
  960.      * following argument list: (SplitButton this, Ext.menu.CheckItem item)
  961.      */
  962.     /**
  963.      * @cfg {String} forceIcon A css class which sets an image to be used as the static icon for this button.  This
  964.      * icon will always be displayed regardless of which item is selected in the dropdown list.  This overrides the 
  965.      * default behavior of changing the button's icon to match the selected item's icon on change.
  966.      */
  967.     /**
  968.      * @property menu
  969.      * @type Menu
  970.      * The {@link Ext.menu.Menu Menu} object used to display the {@link Ext.menu.CheckItem CheckItems} representing the available choices.
  971.      */
  973.     // private
  974.     getItemText : function(item){
  975.         if(item && this.showText === true){
  976.             var text = '';
  977.             if(this.prependText){
  978.                 text += this.prependText;
  979.             }
  980.             text += item.text;
  981.             return text;
  982.         }
  983.         return undefined;
  984.     },
  986.     /**
  987.      * Sets the button's active menu item.
  988.      * @param {Ext.menu.CheckItem} item The item to activate
  989.      * @param {Boolean} suppressEvent True to prevent the button's change event from firing (defaults to false)
  990.      */
  991.     setActiveItem : function(item, suppressEvent){
  992.         if(!Ext.isObject(item)){
  993.             item = this.menu.getComponent(item);
  994.         }
  995.         if(item){
  996.             if(!this.rendered){
  997.                 this.text = this.getItemText(item);
  998.                 this.iconCls = item.iconCls;
  999.             }else{
  1000.                 var t = this.getItemText(item);
  1001.                 if(t){
  1002.                     this.setText(t);
  1003.                 }
  1004.                 this.setIconClass(item.iconCls);
  1005.             }
  1006.             this.activeItem = item;
  1007.             if(!item.checked){
  1008.                 item.setChecked(true, true);
  1009.             }
  1010.             if(this.forceIcon){
  1011.                 this.setIconClass(this.forceIcon);
  1012.             }
  1013.             if(!suppressEvent){
  1014.                 this.fireEvent('change', this, item);
  1015.             }
  1016.         }
  1017.     },
  1019.     /**
  1020.      * Gets the currently active menu item.
  1021.      * @return {Ext.menu.CheckItem} The active item
  1022.      */
  1023.     getActiveItem : function(){
  1024.         return this.activeItem;
  1025.     },
  1027.     // private
  1028.     initComponent : function(){
  1029.         this.addEvents(
  1030.             /**
  1031.              * @event change
  1032.              * Fires after the button's active menu item has changed.  Note that if a {@link #changeHandler} function
  1033.              * is set on this CycleButton, it will be called instead on active item change and this change event will
  1034.              * not be fired.
  1035.              * @param {Ext.CycleButton} this
  1036.              * @param {Ext.menu.CheckItem} item The menu item that was selected
  1037.              */
  1038.             "change"
  1039.         );
  1041.         if(this.changeHandler){
  1042.             this.on('change', this.changeHandler, this.scope||this);
  1043.             delete this.changeHandler;
  1044.         }
  1046.         this.itemCount = this.items.length;
  1048.         this.menu = {cls:'x-cycle-menu', items:[]};
  1049.         var checked;
  1050.         Ext.each(this.items, function(item, i){
  1051.             Ext.apply(item, {
  1052.                 group: item.group || this.id,
  1053.                 itemIndex: i,
  1054.                 checkHandler: this.checkHandler,
  1055.                 scope: this,
  1056.                 checked: item.checked || false
  1057.             });
  1058.             this.menu.items.push(item);
  1059.             if(item.checked){
  1060.                 checked = item;
  1061.             }
  1062.         }, this);
  1063.         this.setActiveItem(checked, true);
  1064.         Ext.CycleButton.superclass.initComponent.call(this);
  1066.         this.on('click', this.toggleSelected, this);
  1067.     },
  1069.     // private
  1070.     checkHandler : function(item, pressed){
  1071.         if(pressed){
  1072.             this.setActiveItem(item);
  1073.         }
  1074.     },
  1076.     /**
  1077.      * This is normally called internally on button click, but can be called externally to advance the button's
  1078.      * active item programmatically to the next one in the menu.  If the current item is the last one in the menu
  1079.      * the active item will be set to the first item in the menu.
  1080.      */
  1081.     toggleSelected : function(){
  1082.         var m = this.menu;
  1083.         m.render();
  1084.         // layout if we haven't before so the items are active
  1085.         if(!m.hasLayout){
  1086.             m.doLayout();
  1087.         }
  1088.         
  1089.         var nextIdx, checkItem;
  1090.         for (var i = 1; i < this.itemCount; i++) {
  1091.             nextIdx = (this.activeItem.itemIndex + i) % this.itemCount;
  1092.             // check the potential item
  1093.             checkItem = m.items.itemAt(nextIdx);
  1094.             // if its not disabled then check it.
  1095.             if (!checkItem.disabled) {
  1096.                 checkItem.setChecked(true);
  1097.                 break;
  1098.             }
  1099.         }
  1100.     }
  1101. });
  1102. Ext.reg('cycle', Ext.CycleButton);