/** * @author Ed Spencer * @class Ext.tab.Tab * @extends Ext.button.Button * *Represents a single Tab in a TabPanel. A Tab is simply a slightly customized {@link Ext.button.Button Button}, * styled to look like a tab. Tabs are optionally closable, and can also be disabled. 99% of the time you will not * need to create Tabs manually as the framework does so automatically when you use a {@link Ext.tab.TabPanel TabPanel}
*/ Ext.define('Ext.tab.Tab', { extend: 'Ext.button.Button', alias: 'widget.tab', isTab: true, baseCls: Ext.baseCSSPrefix + 'tab', /** * @cfg {String} pressedCls * The CSS class to be applied to a Tab when it is pressed. Defaults to 'x-tab-pressed'. * Providing your own CSS for this class enables you to customize the pressed state. */ pressedCls: Ext.baseCSSPrefix + 'tab-pressed', /** * @cfg {String} activeCls * The CSS class to be applied to a Tab when it is active. Defaults to 'x-tab-active'. * Providing your own CSS for this class enables you to customize the active state. */ activeCls: Ext.baseCSSPrefix + 'tab-active', /** * @cfg {String} closableCls * The CSS class which is added to the tab when it is closable */ closableCls: Ext.baseCSSPrefix + 'tab-closable', /** * @cfg {Boolean} closable True to make the Tab start closable (the close icon will be visible). Defaults to true */ closable: true, /** * @property Boolean * Read-only property indicating that this tab is currently active. This is NOT a public configuration. */ active: false, /** * @property closable * @type Boolean * True if the tab is currently closable */ scale: false, initComponent: function() { var me = this; me.addEvents( /** * @event activate * @param {Ext.tab.Tab} this */ 'activate', /** * @event deactivate * @param {Ext.tab.Tab} this */ 'deactivate', /** * @event beforeclose * Fires if the user clicks on the Tab's close button, but before the {@link #close} event is fired. Return * false from any listener to stop the close event being fired * @param {Ext.tab.Tab} tab The Tab object */ 'beforeclose', /** * @event beforeclose * Fires to indicate that the tab is to be closed, usually because the user has clicked the close button. * @param {Ext.tab.Tab} tab The Tab object */ 'close' ); me.callParent(arguments); me.setClosable(me.closable); if (me.card) { me.setCard(me.card); } }, /** * @ignore */ afterRender: function() { var me = this; if (me.active) { me.addCls(me.activeCls); } me.callParent(arguments); }, /** * Sets the tab as either closable or not * @param {Boolean} closable Pass false to make the tab not closable. Otherwise the tab will be made closable (eg a * close button will appear on the tab) */ setClosable: function(closable) { var me = this, cls = me.closableCls; closable = !!closable; me.closable = closable; if (closable) { me.addCls(cls); } else { me.removeCls(cls); } }, /** * Sets this tab's attached card. Usually this is handled automatically by the {@link Ext.tab.TabPanel} that this Tab * belongs to and would not need to be done by the developer * @param {Ext.Component} card The card to set */ setCard: function(card) { var me = this; me.setText(me.title || card.title); me.setIconClass(me.iconCls || card.iconCls); }, /** * @private * Listener attached to click events on the Tab's close button */ onCloseClick: function() { var me = this; if (me.fireEvent('beforeclose', me) !== false) { if (me.tabBar) { me.tabBar.closeTab(me); } me.fireEvent('close', me); } }, // @private activate : function() { var me = this; me.active = true; me.addCls(me.activeCls); me.fireEvent('activate', me); }, // @private deactivate : function() { var me = this; me.active = false; me.removeCls(me.activeCls); me.fireEvent('deactivate', me); } });