X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..HEAD:/src/button/Button.js diff --git a/src/button/Button.js b/src/button/Button.js index bfc6ba3e..4b19c5ef 100644 --- a/src/button/Button.js +++ b/src/button/Button.js @@ -1,136 +1,146 @@ -/** - * @class Ext.button.Button - * @extends Ext.Component - -Create simple buttons with this component. Customisations include {@link #config-iconAlign aligned} -{@link #config-iconCls icons}, {@link #config-menu dropdown menus}, {@link #config-tooltip tooltips} -and {@link #config-scale sizing options}. Specify a {@link #config-handler handler} to run code when -a user clicks the button, or use {@link #config-listeners listeners} for other events such as -{@link #events-mouseover mouseover}. - -{@img Ext.button.Button/Ext.button.Button1.png Ext.button.Button component} -Example usage: - - Ext.create('Ext.Button', { - text: 'Click me', - renderTo: Ext.getBody(), - handler: function() { - alert('You clicked the button!') - } - }); - -The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler} method. -Example usage: - - Ext.create('Ext.Button', { - text : 'Dyanmic Handler Button', - renderTo: Ext.getBody(), - handler : function() { - //this button will spit out a different number every time you click it. - //so firstly we must check if that number is already set: - if (this.clickCount) { - //looks like the property is already set, so lets just add 1 to that number and alert the user - this.clickCount++; - alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..'); - } else { - //if the clickCount property is not set, we will set it and alert the user - this.clickCount = 1; - alert('You just clicked the button for the first time!\n\nTry pressing it again..'); - } - } - }); +/* -A button within a container: +This file is part of Ext JS 4 - Ext.create('Ext.Container', { - renderTo: Ext.getBody(), - items : [ - { - xtype: 'button', - text : 'My Button' - } - ] - }); - -A useful option of Button is the {@link #scale} configuration. This configuration has three different options: -* `'small'` -* `'medium'` -* `'large'` - -{@img Ext.button.Button/Ext.button.Button2.png Ext.button.Button component} -Example usage: - - Ext.create('Ext.Button', { - renderTo: document.body, - text : 'Click me', - scale : 'large' - }); - -Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`. -{@img Ext.button.Button/Ext.button.Button3.png Ext.button.Button component} -Example usage: - - Ext.create('Ext.Button', { - renderTo: Ext.getBody(), - text: 'Click Me', - enableToggle: true - }); - -You can assign a menu to a button by using the {@link #menu} configuration. This standard configuration can either be a reference to a {@link Ext.menu.Menu menu} -object, a {@link Ext.menu.Menu menu} id or a {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically added to the button. -You can change the alignment of the arrow using the {@link #arrowAlign} configuration on button. -{@img Ext.button.Button/Ext.button.Button4.png Ext.button.Button component} -Example usage: - - Ext.create('Ext.Button', { - text : 'Menu button', - renderTo : Ext.getBody(), - arrowAlign: 'bottom', - menu : [ - {text: 'Item 1'}, - {text: 'Item 2'}, - {text: 'Item 3'}, - {text: 'Item 4'} - ] - }); - -Using listeners, you can easily listen to events fired by any component, using the {@link #listeners} configuration or using the {@link #addListener} method. -Button has a variety of different listeners: -* `click` -* `toggle` -* `mouseover` -* `mouseout` -* `mouseshow` -* `menuhide` -* `menutriggerover` -* `menutriggerout` - -Example usage: - - Ext.create('Ext.Button', { - text : 'Button', - renderTo : Ext.getBody(), - listeners: { - click: function() { - //this == the button, as we are in the local scope - this.setText('I was clicked!'); - }, - mouseover: function() { - //set a new config which says we moused over, if not already set - if (!this.mousedOver) { - this.mousedOver = true; - alert('You moused over a button!\n\nI wont do this again.'); - } - } - } - }); +Copyright (c) 2011 Sencha Inc - * @constructor - * Create a new button - * @param {Object} config The config object - * @xtype button - * @markdown +Contact: http://www.sencha.com/contact + +GNU General Public License Usage +This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. + +If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. + +*/ +/** * @docauthor Robert Dougan + * + * Create simple buttons with this component. Customisations include {@link #iconAlign aligned} + * {@link #iconCls icons}, {@link #menu dropdown menus}, {@link #tooltip tooltips} + * and {@link #scale sizing options}. Specify a {@link #handler handler} to run code when + * a user clicks the button, or use {@link #listeners listeners} for other events such as + * {@link #mouseover mouseover}. Example usage: + * + * @example + * Ext.create('Ext.Button', { + * text: 'Click me', + * renderTo: Ext.getBody(), + * handler: function() { + * alert('You clicked the button!') + * } + * }); + * + * The {@link #handler} configuration can also be updated dynamically using the {@link #setHandler} + * method. Example usage: + * + * @example + * Ext.create('Ext.Button', { + * text : 'Dynamic Handler Button', + * renderTo: Ext.getBody(), + * handler : function() { + * // this button will spit out a different number every time you click it. + * // so firstly we must check if that number is already set: + * if (this.clickCount) { + * // looks like the property is already set, so lets just add 1 to that number and alert the user + * this.clickCount++; + * alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..'); + * } else { + * // if the clickCount property is not set, we will set it and alert the user + * this.clickCount = 1; + * alert('You just clicked the button for the first time!\n\nTry pressing it again..'); + * } + * } + * }); + * + * A button within a container: + * + * @example + * Ext.create('Ext.Container', { + * renderTo: Ext.getBody(), + * items : [ + * { + * xtype: 'button', + * text : 'My Button' + * } + * ] + * }); + * + * A useful option of Button is the {@link #scale} configuration. This configuration has three different options: + * + * - `'small'` + * - `'medium'` + * - `'large'` + * + * Example usage: + * + * @example + * Ext.create('Ext.Button', { + * renderTo: document.body, + * text : 'Click me', + * scale : 'large' + * }); + * + * Buttons can also be toggled. To enable this, you simple set the {@link #enableToggle} property to `true`. + * Example usage: + * + * @example + * Ext.create('Ext.Button', { + * renderTo: Ext.getBody(), + * text: 'Click Me', + * enableToggle: true + * }); + * + * You can assign a menu to a button by using the {@link #menu} configuration. This standard configuration + * can either be a reference to a {@link Ext.menu.Menu menu} object, a {@link Ext.menu.Menu menu} id or a + * {@link Ext.menu.Menu menu} config blob. When assigning a menu to a button, an arrow is automatically + * added to the button. You can change the alignment of the arrow using the {@link #arrowAlign} configuration + * on button. Example usage: + * + * @example + * Ext.create('Ext.Button', { + * text : 'Menu button', + * renderTo : Ext.getBody(), + * arrowAlign: 'bottom', + * menu : [ + * {text: 'Item 1'}, + * {text: 'Item 2'}, + * {text: 'Item 3'}, + * {text: 'Item 4'} + * ] + * }); + * + * Using listeners, you can easily listen to events fired by any component, using the {@link #listeners} + * configuration or using the {@link #addListener} method. Button has a variety of different listeners: + * + * - `click` + * - `toggle` + * - `mouseover` + * - `mouseout` + * - `mouseshow` + * - `menuhide` + * - `menutriggerover` + * - `menutriggerout` + * + * Example usage: + * + * @example + * Ext.create('Ext.Button', { + * text : 'Button', + * renderTo : Ext.getBody(), + * listeners: { + * click: function() { + * // this == the button, as we are in the local scope + * this.setText('I was clicked!'); + * }, + * mouseover: function() { + * // set a new config which says we moused over, if not already set + * if (!this.mousedOver) { + * this.mousedOver = true; + * alert('You moused over a button!\n\nI wont do this again.'); + * } + * } + * } + * }); */ Ext.define('Ext.button.Button', { @@ -153,257 +163,289 @@ Ext.define('Ext.button.Button', { componentLayout: 'button', /** - * Read-only. True if this button is hidden - * @type Boolean + * @property {Boolean} hidden + * True if this button is hidden. Read-only. */ hidden: false, /** - * Read-only. True if this button is disabled - * @type Boolean + * @property {Boolean} disabled + * True if this button is disabled. Read-only. */ disabled: false, /** - * Read-only. True if this button is pressed (only if enableToggle = true) - * @type Boolean + * @property {Boolean} pressed + * True if this button is pressed (only if enableToggle = true). Read-only. */ pressed: false, /** - * @cfg {String} text The button text to be used as innerHTML (html tags are accepted) + * @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 {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:
+ * @cfg {Function} handler + * A function called when the button is clicked (can be used instead of click event). + * @cfg {Ext.button.Button} handler.button This button. + * @cfg {Ext.EventObject} handler.e 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.Panel}.{@link Ext.panel.Panel#minButtonWidth minButtonWidth}. + * @cfg {Number} minWidth + * The minimum width for this button (used to give a set of buttons a common width). + * See also {@link Ext.panel.Panel}.{@link Ext.panel.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 {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} [hidden=false] + * True to start hidden. */ /** - * @cfg {Boolean} disabled True to start disabled (defaults to false) + * @cfg {Boolean} [disabled=true] + * True to start disabled. */ /** - * @cfg {Boolean} pressed True to start pressed (only if enableToggle = true) + * @cfg {Boolean} [pressed=false] + * 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 {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). + * @cfg {Boolean/Object} [repeat=false] + * True to repeat fire the click event while the mouse is down. This can also be a + * {@link Ext.util.ClickRepeater ClickRepeater} config object. */ /** - * @cfg {Number} tabIndex Set a DOM tabIndex for this button (defaults to undefined) + * @cfg {Number} tabIndex + * Set a DOM tabIndex for this button. */ /** - * @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} [allowDepress=true] + * False to not allow a pressed Button to be depressed. Only valid when {@link #enableToggle} is true. */ /** - * @cfg {Boolean} enableToggle - * True to enable pressed/not pressed toggling (defaults to false) + * @cfg {Boolean} [enableToggle=false] + * True to enable pressed/not pressed toggling. */ enableToggle: false, /** * @cfg {Function} toggleHandler - * Function called when a Button with {@link #enableToggle} set to true is clicked. Two arguments are passed: + * Function called when a Button with {@link #enableToggle} set to true is clicked. + * @cfg {Ext.button.Button} toggleHandler.button This button. + * @cfg {Boolean} toggleHandler.state The next state of 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 {Ext.menu.Menu/String/Object} menu + * Standard menu attribute consisting of a reference to a menu object, a menu id or a menu config blob. */ /** * @cfg {String} menuAlign - * The position to align the menu to (see {@link Ext.core.Element#alignTo} for more details, defaults to 'tl-bl?'). + * The position to align the menu to (see {@link Ext.Element#alignTo} for more details). */ menuAlign: 'tl-bl?', /** - * @cfg {String} overflowText If used in a {@link Ext.toolbar.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} textAlign + * The text alignment for this button (center, left, right). + */ + textAlign: 'center', + + /** + * @cfg {String} overflowText + * If used in a {@link Ext.toolbar.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 + * 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' + * The type of `` to create: submit, reset or button. */ type: 'button', /** * @cfg {String} clickEvent * The DOM event that will fire the handler of the button. This can be any valid event name (dblclick, contextmenu). - * Defaults to 'click'. */ clickEvent: 'click', - + /** * @cfg {Boolean} preventDefault - * True to prevent the default action when the {@link #clickEvent} is processed. Defaults to true. + * True to prevent the default action when the {@link #clickEvent} is processed. */ preventDefault: true, /** * @cfg {Boolean} handleMouseEvents - * False to disable visual cues on mouseover, mouseout and mousedown (defaults to true) + * False to disable visual cues on mouseover, mouseout and mousedown. */ handleMouseEvents: true, /** * @cfg {String} tooltipType - * The type of tooltip to use. Either 'qtip' (default) for QuickTips or 'title' for title attribute. + * The type of tooltip to use. Either 'qtip' for QuickTips or 'title' for title attribute. */ tooltipType: 'qtip', /** - * @cfg {String} baseCls - * The base CSS class to add to all buttons. (Defaults to 'x-btn') + * @cfg {String} [baseCls='x-btn'] + * The base CSS class to add to all buttons. */ baseCls: Ext.baseCSSPrefix + 'btn', /** * @cfg {String} pressedCls - * The CSS class to add to a button when it is in the pressed state. (Defaults to 'x-btn-pressed') + * The CSS class to add to a button when it is in the pressed state. */ pressedCls: 'pressed', - + /** * @cfg {String} overCls - * The CSS class to add to a button when it is in the over (hovered) state. (Defaults to 'x-btn-over') + * The CSS class to add to a button when it is in the over (hovered) state. */ overCls: 'over', - + /** * @cfg {String} focusCls - * The CSS class to add to a button when it is in the focussed state. (Defaults to 'x-btn-focus') + * The CSS class to add to a button when it is in the focussed state. */ focusCls: 'focus', - + /** * @cfg {String} menuActiveCls - * The CSS class to add to a button when it's menu is active. (Defaults to 'x-btn-menu-active') + * The CSS class to add to a button when it's menu is active. */ menuActiveCls: 'menu-active', + /** + * @cfg {String} href + * The URL to visit when the button is clicked. Specifying this config is equivalent to specifying: + * + * handler: function() { window.location = "http://www.sencha.com" } + */ + + /** + * @cfg {Object} baseParams + * An object literal of parameters to pass to the url when the {@link #href} property is specified. + */ + + /** + * @cfg {Object} params + * An object literal of parameters to pass to the url when the {@link #href} property is specified. Any params + * override {@link #baseParams}. New params can be set using the {@link #setParams} method. + */ + ariaRole: 'button', // inherited renderTpl: - '' + + '' + '' + - ' tabIndex="{tabIndex}" role="link">' + - '{text}' + + ' tabIndex="{tabIndex}" role="link">' + + '' + + '{text}' + + '' + + '' + '' + '' + '' + - '' + '' + '' , /** * @cfg {String} scale - *

(Optional) The size of the Button. Three values are allowed:

- * - *

Defaults to 'small'.

+ * 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. */ scale: 'small', - + /** - * @private An array of allowed scales. + * @private + * An array of allowed scales. */ allowedScales: ['small', 'medium', 'large'], - + /** - * @cfg {Object} scope The scope (this reference) in which the - * {@link #handler} and {@link #toggleHandler} is - * executed. Defaults to this Button. + * @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:

- * - *

Defaults to 'left'.

+ * The side of the Button box to render the icon. Four values are allowed: + * + * - 'top' + * - 'right' + * - 'bottom' + * - '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'.

+ * The side of the Button box to render the arrow if the button has an associated {@link #menu}. Two + * values are allowed: + * + * - 'right' + * - 'bottom' */ arrowAlign: 'right', /** * @cfg {String} arrowCls - *

(Optional) The className used for the inner arrow element if the button has a menu.

+ * The className used for the inner arrow element if the button has a menu. */ arrowCls: 'arrow', /** - * @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 + * @property {Ext.Template} template + * 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}. */ /** @@ -412,19 +454,18 @@ Ext.define('Ext.button.Button', { */ /** - * @property menu - * @type Menu - * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option. + * @property {Ext.menu.Menu} menu + * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config + * option. */ /** * @cfg {Boolean} autoWidth - * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content. - * If the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent - * the button from doing this automatic sizing. - * Defaults to undefined. + * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content. If + * the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent the button + * from doing this automatic sizing. */ - + maskOnDisable: false, // inherit docs @@ -436,15 +477,15 @@ Ext.define('Ext.button.Button', { /** * @event click * Fires when this button is clicked - * @param {Button} this - * @param {EventObject} e The click event + * @param {Ext.button.Button} this + * @param {Event} e The click event */ 'click', /** * @event toggle * Fires when the 'pressed' state of this button changes (only if enableToggle = true) - * @param {Button} this + * @param {Ext.button.Button} this * @param {Boolean} pressed */ 'toggle', @@ -452,7 +493,7 @@ Ext.define('Ext.button.Button', { /** * @event mouseover * Fires when the mouse hovers over the button - * @param {Button} this + * @param {Ext.button.Button} this * @param {Event} e The event object */ 'mouseover', @@ -460,7 +501,7 @@ Ext.define('Ext.button.Button', { /** * @event mouseout * Fires when the mouse exits the button - * @param {Button} this + * @param {Ext.button.Button} this * @param {Event} e The event object */ 'mouseout', @@ -468,34 +509,34 @@ Ext.define('Ext.button.Button', { /** * @event menushow * If this button has a menu, this event fires when it is shown - * @param {Button} this - * @param {Menu} menu + * @param {Ext.button.Button} this + * @param {Ext.menu.Menu} menu */ 'menushow', /** * @event menuhide * If this button has a menu, this event fires when it is hidden - * @param {Button} this - * @param {Menu} menu + * @param {Ext.button.Button} this + * @param {Ext.menu.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 + * @param {Ext.button.Button} this + * @param {Ext.menu.Menu} menu + * @param {Event} 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 + * @param {Ext.button.Button} this + * @param {Ext.menu.Menu} menu + * @param {Event} e */ 'menutriggerout' ); @@ -547,15 +588,16 @@ Ext.define('Ext.button.Button', { // private setButtonCls: function() { var me = this, - el = me.el, - cls = []; + cls = [], + btnIconEl = me.btnIconEl, + hide = 'x-hide-display'; if (me.useSetClass) { if (!Ext.isEmpty(me.oldCls)) { me.removeClsWithUI(me.oldCls); me.removeClsWithUI(me.pressedCls); } - + // Check whether the button has an icon or not, and if it has an icon, what is th alignment if (me.iconCls || me.icon) { if (me.text) { @@ -563,32 +605,35 @@ Ext.define('Ext.button.Button', { } else { cls.push('icon'); } - } else if (me.text) { - cls.push('noicon'); + if (btnIconEl) { + btnIconEl.removeCls(hide); + } + } else { + if (me.text) { + cls.push('noicon'); + } + if (btnIconEl) { + btnIconEl.addCls(hide); + } } - + me.oldCls = cls; me.addClsWithUI(cls); me.addClsWithUI(me.pressed ? me.pressedCls : null); } }, - + // private onRender: function(ct, position) { // classNames for the button var me = this, repeater, btn; - + // Apply the renderData to the template args Ext.applyIf(me.renderData, me.getTemplateArgs()); - // Extract the button and the button wrapping element - Ext.applyIf(me.renderSelectors, { - btnEl : me.href ? 'a' : 'button', - btnWrap: 'em', - btnInnerEl: '.' + me.baseCls + '-inner' - }); - + me.addChildEls('btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl'); + if (me.scale) { me.ui = me.ui + '-' + me.scale; } @@ -598,7 +643,7 @@ Ext.define('Ext.button.Button', { // If it is a split button + has a toolip for the arrow if (me.split && me.arrowTooltip) { - me.arrowEl.dom[me.tooltipType] = me.arrowTooltip; + me.arrowEl.dom.setAttribute(me.getTipAttr(), me.arrowTooltip); } // Add listeners to the focus and blur events on the element @@ -623,6 +668,10 @@ Ext.define('Ext.button.Button', { me.setTooltip(me.tooltip, true); } + if (me.textAlign) { + me.setTextAlign(me.textAlign); + } + // Add the mouse events to the button if (me.handleMouseEvents) { me.mon(btn, { @@ -668,20 +717,22 @@ Ext.define('Ext.button.Button', { }, /** - *

This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} 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 Object containing the - * following properties:

    - *
  • type : The <button>'s {@link #type}
    • - *
  • splitCls : A CSS class to determine the presence and position of an arrow icon. ('x-btn-arrow' or 'x-btn-arrow-bottom' or '')
    • - *
  • cls : A CSS class name applied to the Button's main <tbody> element which determines the button's scale and icon alignment.
    • - *
  • text : The {@link #text} to display ion the Button.
    • - *
  • tabIndex : The tab index within the input flow.
    • - *
- * @return {Array} Substitution data for a Template. - */ + * This method returns an object which provides substitution parameters for the {@link #renderTpl XTemplate} 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. + * + * @return {Object} Substitution data for a Template. The default implementation which provides data for the default + * {@link #template} returns an Object containing the following properties: + * @return {String} return.type The `