/**
* @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 : ButtonThis Button.
e : EventObjectThe click event.
*/
/**
* @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.
* Defaults to 'button:first-child'.
*/
buttonSelector : 'button:first-child',
/**
* @cfg {String} scale
* (Optional) The size of the Button. Three values are allowed:
*
* - 'small'
Results in the button element being 16px high.
* - 'medium'
Results in the button element being 24px high.
* - 'large'
Results in the button element being 32px high.
*
* Defaults to 'small'.
*/
scale : 'small',
/**
* @cfg {Object} scope The scope (this reference) in which the
* {@link #handler} and {@link #toggleHandler} is
* executed. Defaults to this Button.
*/
/**
* @cfg {String} iconAlign
* (Optional) The side of the Button box to render the icon. Four values are allowed:
*
* - 'top'
* - 'right'
* - 'bottom'
* - 'left'
*
* Defaults to 'left'.
*/
iconAlign : 'left',
/**
* @cfg {String} arrowAlign
* (Optional) The side of the Button box to render the arrow if the button has an associated {@link #menu}.
* Two values are allowed:
*
* Defaults to 'right'.
*/
arrowAlign : 'right',
/**
* @cfg {Ext.Template} template (Optional)
* 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}
*
* - String : A string to be used as innerHTML (html tags are accepted) to show in a tooltip
* - Object : A configuration object for {@link Ext.QuickTips#register}.
*