Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / src / tab / Tab.js

diff --git a/src/tab/Tab.js b/src/tab/Tab.js
index 19a371b..156ffa1 100644 (file)
--- a/src/tab/Tab.js
+++ b/src/tab/Tab.js
@@ -16,15 +16,15 @@ If you are unsure which license is appropriate for your use, please contact the
  * @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
+ *
+ * <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'
@@ -38,14 +38,14 @@ Ext.define('Ext.tab.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.
      */
 
     /**
@@ -55,19 +55,18 @@ Ext.define('Ext.tab.Tab', {
     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,
@@ -81,19 +80,21 @@ 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',
@@ -107,13 +108,13 @@ 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) {
@@ -125,36 +126,55 @@ 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;
@@ -163,14 +183,14 @@ Ext.define('Ext.tab.Tab', {
     // inherit docs
     disable : function(silent) {
         var me = this;
-        
+
         me.callParent(arguments);
-        
+
         me.addClsWithUI(me.position + '-disabled');
 
         return me;
     },
-    
+
     /**
      * @ignore
      */
@@ -294,7 +314,7 @@ Ext.define('Ext.tab.Tab', {
             }
         }
     },
-    
+
     /**
      * Fires the close event on the tab.
      * @private
@@ -302,33 +322,33 @@ Ext.define('Ext.tab.Tab', {
     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]);
 
@@ -340,10 +360,10 @@ 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);
         }