/**
* @author Ed Spencer
* @class Ext.tab.Tab
* @extends Ext.button.Button
- *
- * <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
+ * <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. Typically you will not
+ * need to create Tabs manually as the framework does so automatically when you use a {@link Ext.tab.Panel TabPanel}</p>
*/
Ext.define('Ext.tab.Tab', {
extend: 'Ext.button.Button',
alias: 'widget.tab',
-
+
requires: [
'Ext.layout.component.Tab',
'Ext.util.KeyNav'
@@ -24,43 +39,42 @@ 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'.
+ * The CSS class to be applied to a Tab when it is 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'.
+ * The CSS class to be applied to a Tab when it is 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
+ /**
+ * @cfg {Boolean} closable True to make the Tab start closable (the close icon will be visible).
*/
closable: true,
- /**
- * @cfg {String} closeText
+ /**
+ * @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
+ /**
+ * @property {Boolean} active
* 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
@@ -69,24 +83,26 @@ Ext.define('Ext.tab.Tab', {
scale: false,
position: 'top',
-
+
initComponent: function() {
var me = this;
me.addEvents(
- /**
+ /**
* @event activate
+ * Fired when the tab is activated.
* @param {Ext.tab.Tab} this
*/
'activate',
- /**
+ /**
* @event deactivate
+ * Fired when the tab is deactivated.
* @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,14 +110,14 @@ Ext.define('Ext.tab.Tab', {
*/
'beforeclose',
- /**
- * @event beforeclose
+ /**
+ * @event close
* 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);
if (me.card) {
@@ -109,40 +125,59 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* @ignore
*/
onRender: function() {
- var me = this;
-
+ var me = this,
+ tabBar = me.up('tabbar'),
+ tabPanel = me.up('tabpanel');
+
me.addClsWithUI(me.position);
-
+
// Set all the state classNames, as they need to include the UI
// me.disabledCls = me.getClsWithUIs('disabled');
me.syncClosableUI();
+ // Propagate minTabWidth and maxTabWidth settings from the owning TabBar then TabPanel
+ if (!me.minWidth) {
+ me.minWidth = (tabBar) ? tabBar.minTabWidth : me.minWidth;
+ if (!me.minWidth && tabPanel) {
+ me.minWidth = tabPanel.minTabWidth;
+ }
+ if (me.minWidth && me.iconCls) {
+ me.minWidth += 25;
+ }
+ }
+ if (!me.maxWidth) {
+ me.maxWidth = (tabBar) ? tabBar.maxTabWidth : me.maxWidth;
+ if (!me.maxWidth && tabPanel) {
+ me.maxWidth = tabPanel.maxTabWidth;
+ }
+ }
+
me.callParent(arguments);
-
+
if (me.active) {
me.activate(true);
}
me.syncClosableElements();
-
+
me.keyNav = Ext.create('Ext.util.KeyNav', me.el, {
enter: me.onEnterKey,
del: me.onDeleteKey,
scope: me
});
},
-
+
// inherit docs
enable : function(silent) {
var me = this;
me.callParent(arguments);
-
+
me.removeClsWithUI(me.position + '-disabled');
return me;
@@ -151,15 +186,15 @@ Ext.define('Ext.tab.Tab', {
// inherit docs
disable : function(silent) {
var me = this;
-
+
me.callParent(arguments);
-
+
me.addClsWithUI(me.position + '-disabled');
return me;
},
-
- /**
+
+ /**
* @ignore
*/
onDestroy: function() {
@@ -176,7 +211,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 +244,7 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* This method ensures that the closeBtn element exists or not based on 'closable'.
* @private
*/
@@ -222,7 +257,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 +271,7 @@ Ext.define('Ext.tab.Tab', {
}
},
- /**
+ /**
* This method ensures that the UI classes are added or removed based on 'closable'.
* @private
*/
@@ -250,7 +285,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 +298,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,39 +307,51 @@ 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) {
var me = this;
-
+
if (me.tabBar) {
me.tabBar.onClick(e, me.el);
}
},
-
- /**
+
+ /**
* @private
*/
onDeleteKey: function(e) {
var me = this;
-
+
if (me.closable) {
me.onCloseClick();
}
},
-
+
// @private
activate : function(supressEvent) {
var me = this;
-
+
me.active = true;
me.addClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
@@ -316,13 +363,15 @@ Ext.define('Ext.tab.Tab', {
// @private
deactivate : function(supressEvent) {
var me = this;
-
+
me.active = false;
me.removeClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
-
+
if (supressEvent !== true) {
me.fireEvent('deactivate', me);
}
}
});
-