/**
* @author Ed Spencer
* @class Ext.tab.Tab
* @extends Ext.button.Button
@@ -6,8 +23,6 @@
* <p>Represents a single Tab in a {@link Ext.tab.Panel 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.Panel TabPanel}</p>
- *
- * @xtype tab
*/
Ext.define('Ext.tab.Tab', {
extend: 'Ext.button.Button',
@@ -24,43 +39,43 @@ Ext.define('Ext.tab.Tab', {
baseCls: Ext.baseCSSPrefix + 'tab',
- /**
+ /**
* @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: 'active',
- /**
+ /**
* @cfg {String} disabledCls
* The CSS class to be applied to a Tab when it is disabled. Defaults to 'x-tab-disabled'.
*/
- /**
+ /**
* @cfg {String} closableCls
* The CSS class which is added to the tab when it is closable
*/
closableCls: 'closable',
- /**
+ /**
* @cfg {Boolean} closable True to make the Tab start closable (the close icon will be visible). Defaults to true
*/
closable: true,
- /**
+ /**
* @cfg {String} closeText
* The accessible text label for the close button link; only used when {@link #closable} = true.
* Defaults to 'Close Tab'.
*/
closeText: 'Close Tab',
- /**
+ /**
* @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
@@ -74,19 +89,19 @@ Ext.define('Ext.tab.Tab', {
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
@@ -94,7 +109,7 @@ Ext.define('Ext.tab.Tab', {
*/
'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
@@ -109,7 +124,7 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* @ignore
*/
onRender: function() {
@@ -159,7 +174,7 @@ Ext.define('Ext.tab.Tab', {
return me;
},
- /**
+ /**
* @ignore
*/
onDestroy: function() {
@@ -176,7 +191,7 @@ Ext.define('Ext.tab.Tab', {
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)
@@ -209,7 +224,7 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* This method ensures that the closeBtn element exists or not based on 'closable'.
* @private
*/
@@ -222,7 +237,7 @@ Ext.define('Ext.tab.Tab', {
tag: 'a',
cls: me.baseCls + '-close-btn',
href: '#',
- html: me.closeText,
+ // html: me.closeText, // removed for EXTJSIV-1719, by rob@sencha.com
title: me.closeText
}).on('click', Ext.EventManager.preventDefault); // mon ???
}
@@ -236,7 +251,7 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* This method ensures that the UI classes are added or removed based on 'closable'.
* @private
*/
@@ -250,7 +265,7 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* Sets this tab's attached card. Usually this is handled automatically by the {@link Ext.tab.Panel} that this Tab
* belongs to and would not need to be done by the developer
* @param {Ext.Component} card The card to set
@@ -263,7 +278,7 @@ Ext.define('Ext.tab.Tab', {
me.setIconCls(me.iconCls || card.iconCls);
},
- /**
+ /**
* @private
* Listener attached to click events on the Tab's close button
*/
@@ -272,14 +287,26 @@ Ext.define('Ext.tab.Tab', {
if (me.fireEvent('beforeclose', me) !== false) {
if (me.tabBar) {
- me.tabBar.closeTab(me);
+ if (me.tabBar.closeTab(me) === false) {
+ // beforeclose on the panel vetoed the event, stop here
+ return;
+ }
+ } else {
+ // if there's no tabbar, fire the close event
+ me.fireEvent('close', me);
}
-
- me.fireEvent('close', me);
}
},
- /**
+ /**
+ * Fires the close event on the tab.
+ * @private
+ */
+ fireClose: function(){
+ this.fireEvent('close', this);
+ },
+
+ /**
* @private
*/
onEnterKey: function(e) {
@@ -290,7 +317,7 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* @private
*/
onDeleteKey: function(e) {
@@ -325,4 +352,6 @@ Ext.define('Ext.tab.Tab', {
}
}
});
-