X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..HEAD:/src/button/Button.js diff --git a/src/button/Button.js b/src/button/Button.js index 4d874b66..4b19c5ef 100644 --- a/src/button/Button.js +++ b/src/button/Button.js @@ -13,134 +13,134 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @class Ext.button.Button - * @extends Ext.Component - -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}. - -{@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: - - 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.'); - } - } - } - }); - - * @markdown * @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', { @@ -163,274 +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. + * 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">' + - '' + + ' 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}. */ /** @@ -439,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 @@ -463,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', @@ -479,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', @@ -487,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', @@ -495,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' ); @@ -574,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) { @@ -590,33 +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', - btnIconEl: '.'+ me.baseCls + '-icon' - }); - + me.addChildEls('btnEl', 'btnWrap', 'btnInnerEl', 'btnIconEl'); + if (me.scale) { me.ui = me.ui + '-' + me.scale; } @@ -626,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 @@ -651,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, { @@ -696,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 `