/**
+ * @class Ext.Button
+ * @extends Ext.BoxComponent
+ * Simple Button class
+ * @cfg {String} text The button text to be used as innerHTML (html tags are accepted)
+ * @cfg {String} icon The path to an image to display in the button (the image will be set as the background-image
+ * CSS property of the button by default, so if you want a mixed icon/text button, set cls:'x-btn-text-icon')
+ * @cfg {Function} handler A function called when the button is clicked (can be used instead of click event).
+ * The handler is passed the following parameters:
+ *
b : Button
This Button.
+ *
e : EventObject
The click event.
+ *
+ * @cfg {Number} minWidth The minimum width for this button (used to give a set of buttons a common width).
+ * See also {@link Ext.Panel}.{@link Ext.Panel#minButtonWidth minButtonWidth}.
+ * @cfg {String/Object} tooltip The tooltip for the button - can be a string to be used as innerHTML (html tags are accepted) or QuickTips config object
+ * @cfg {Boolean} hidden True to start hidden (defaults to false)
+ * @cfg {Boolean} disabled True to start disabled (defaults to false)
+ * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true)
+ * @cfg {String} toggleGroup The group this toggle button is a member of (only 1 per group can be pressed)
+ * @cfg {Boolean/Object} repeat True to repeat fire the click event while the mouse is down. This can also be
+ * a {@link Ext.util.ClickRepeater ClickRepeater} config object (defaults to false).
+ * @constructor
+ * Create a new button
+ * @param {Object} config The config object
+ * @xtype button
+ */
+Ext.Button = Ext.extend(Ext.BoxComponent, {
+ /**
+ * Read-only. True if this button is hidden
+ * @type Boolean
+ */
+ hidden : false,
+ /**
+ * Read-only. True if this button is disabled
+ * @type Boolean
+ */
+ disabled : false,
+ /**
+ * Read-only. True if this button is pressed (only if enableToggle = true)
+ * @type Boolean
+ */
+ pressed : false,
+ /**
+ * The Button's owner {@link Ext.Panel} (defaults to undefined, and is set automatically when
+ * the Button is added to a container). Read-only.
+ * @type Ext.Panel
+ * @property ownerCt
+ */
+
+ /**
+ * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined)
+ */
+
+ /**
+ * @cfg {Boolean} allowDepress
+ * False to not allow a pressed Button to be depressed (defaults to undefined). Only valid when {@link #enableToggle} is true.
+ */
+
+ /**
+ * @cfg {Boolean} enableToggle
+ * True to enable pressed/not pressed toggling (defaults to false)
+ */
+ enableToggle : false,
+ /**
+ * @cfg {Function} toggleHandler
+ * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed:
+ *
button : Ext.Button
this Button object
+ *
state : Boolean
The next state if the Button, true means pressed.
+ *
+ */
+ /**
+ * @cfg {Mixed} menu
+ * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob (defaults to undefined).
+ */
+ /**
+ * @cfg {String} menuAlign
+ * The position to align the menu to (see {@link Ext.Element#alignTo} for more details, defaults to 'tl-bl?').
+ */
+ menuAlign : 'tl-bl?',
+
+ /**
+ * @cfg {String} overflowText If used in a {@link Ext.Toolbar Toolbar}, the
+ * text to be used if this item is shown in the overflow menu. See also
+ * {@link Ext.Toolbar.Item}.{@link Ext.Toolbar.Item#overflowText overflowText}.
+ */
+ /**
+ * @cfg {String} iconCls
+ * A css class which sets a background image to be used as the icon for this button
+ */
+ /**
+ * @cfg {String} type
+ * submit, reset or button - defaults to 'button'
+ */
+ type : 'button',
+
+ // private
+ menuClassTarget : 'tr:nth(2)',
+
+ /**
+ * @cfg {String} clickEvent
+ * The type of event to map to the button's event handler (defaults to 'click')
+ */
+ clickEvent : 'click',
+
+ /**
+ * @cfg {Boolean} handleMouseEvents
+ * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true)
+ */
+ handleMouseEvents : true,
+
+ /**
+ * @cfg {String} tooltipType
+ * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute.
+ */
+ tooltipType : 'qtip',
+
+ /**
+ * @cfg {String} buttonSelector
+ *
(Optional) A {@link Ext.DomQuery DomQuery} selector which is used to extract the active, clickable element from the
+ * DOM structure created.
+ *
When a custom {@link #template} is used, you must ensure that this selector results in the selection of
+ * a focussable element.
A {@link Ext.Template Template} used to create the Button's DOM structure.
+ * Instances, or subclasses which need a different DOM structure may provide a different
+ * template layout in conjunction with an implementation of {@link #getTemplateArgs}.
+ * @type Ext.Template
+ * @property template
+ */
+ /**
+ * @cfg {String} cls
+ * A CSS class string to apply to the button's main element.
+ */
+ /**
+ * @property menu
+ * @type Menu
+ * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option.
+ */
+
+ initComponent : function(){
+ Ext.Button.superclass.initComponent.call(this);
+
+ this.addEvents(
+ /**
+ * @event click
+ * Fires when this button is clicked
+ * @param {Button} this
+ * @param {EventObject} e The click event
+ */
+ 'click',
+ /**
+ * @event toggle
+ * Fires when the 'pressed' state of this button changes (only if enableToggle = true)
+ * @param {Button} this
+ * @param {Boolean} pressed
+ */
+ 'toggle',
+ /**
+ * @event mouseover
+ * Fires when the mouse hovers over the button
+ * @param {Button} this
+ * @param {Event} e The event object
+ */
+ 'mouseover',
+ /**
+ * @event mouseout
+ * Fires when the mouse exits the button
+ * @param {Button} this
+ * @param {Event} e The event object
+ */
+ 'mouseout',
+ /**
+ * @event menushow
+ * If this button has a menu, this event fires when it is shown
+ * @param {Button} this
+ * @param {Menu} menu
+ */
+ 'menushow',
+ /**
+ * @event menuhide
+ * If this button has a menu, this event fires when it is hidden
+ * @param {Button} this
+ * @param {Menu} menu
+ */
+ 'menuhide',
+ /**
+ * @event menutriggerover
+ * If this button has a menu, this event fires when the mouse enters the menu triggering element
+ * @param {Button} this
+ * @param {Menu} menu
+ * @param {EventObject} e
+ */
+ 'menutriggerover',
+ /**
+ * @event menutriggerout
+ * If this button has a menu, this event fires when the mouse leaves the menu triggering element
+ * @param {Button} this
+ * @param {Menu} menu
+ * @param {EventObject} e
+ */
+ 'menutriggerout'
+ );
+ if(this.menu){
+ this.menu = Ext.menu.MenuMgr.get(this.menu);
+ }
+ if(Ext.isString(this.toggleGroup)){
+ this.enableToggle = true;
+ }
+ },
+
+/**
+ *
This method returns an object which provides substitution parameters for the {@link #template Template} used
+ * to create this Button's DOM structure.
+ *
Instances or subclasses which use a different Template to create a different DOM structure may need to provide their
+ * own implementation of this method.
+ *
The default implementation which provides data for the default {@link #template} returns an Array containing the
+ * following items:
+ *
The Button's {@link #text}
+ *
The <button>'s {@link #type}
+ *
The {@link iconCls} applied to the <button> {@link #btnEl element}
+ *
The {@link #cls} applied to the Button's main {@link #getEl Element}
+ *
A CSS class name controlling the Button's {@link #scale} and {@link #iconAlign icon alignment}
+ *
A CSS class name which applies an arrow to the Button if configured with a {@link #menu}