X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..refs/heads/master:/docs/source/Tab2.html diff --git a/docs/source/Tab2.html b/docs/source/Tab2.html index 16c70563..bfd722fb 100644 --- a/docs/source/Tab2.html +++ b/docs/source/Tab2.html @@ -1,18 +1,33 @@ -Sencha Documentation Project
/**
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
  * @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);
         }
     }
 });
-
\ No newline at end of file +
+ +