X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..HEAD:/src/tab/Tab.js diff --git a/src/tab/Tab.js b/src/tab/Tab.js index 19a371b7..156ffa1f 100644 --- 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 - * - *

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 + * + *

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}

*/ 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); }