123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-tab-Tab'>/**
- </span> * @author Ed Spencer
- *
- * 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}
- */
- Ext.define('Ext.tab.Tab', {
- extend: 'Ext.button.Button',
- alias: 'widget.tab',
- requires: [
- 'Ext.layout.component.Tab',
- 'Ext.util.KeyNav'
- ],
- componentLayout: 'tab',
- <span id='Ext-tab-Tab-property-isTab'> /**
- </span> * @property {Boolean} isTab
- * `true` in this class to identify an object as an instantiated Tab, or subclass thereof.
- */
- isTab: true,
- baseCls: Ext.baseCSSPrefix + 'tab',
- <span id='Ext-tab-Tab-cfg-activeCls'> /**
- </span> * @cfg {String} activeCls
- * 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',
- <span id='Ext-tab-Tab-cfg-disabledCls'> /**
- </span> * @cfg {String} [disabledCls='x-tab-disabled']
- * The CSS class to be applied to a Tab when it is disabled.
- */
- <span id='Ext-tab-Tab-cfg-closableCls'> /**
- </span> * @cfg {String} closableCls
- * The CSS class which is added to the tab when it is closable
- */
- closableCls: 'closable',
- <span id='Ext-tab-Tab-cfg-closable'> /**
- </span> * @cfg {Boolean} closable
- * True to make the Tab start closable (the close icon will be visible).
- */
- closable: true,
- //<locale>
- <span id='Ext-tab-Tab-cfg-closeText'> /**
- </span> * @cfg {String} closeText
- * The accessible text label for the close button link; only used when {@link #cfg-closable} = true.
- */
- closeText: 'Close Tab',
- //</locale>
- <span id='Ext-tab-Tab-property-active'> /**
- </span> * @property {Boolean} active
- * Indicates that this tab is currently active. This is NOT a public configuration.
- * @readonly
- */
- active: false,
- <span id='Ext-tab-Tab-property-closable'> /**
- </span> * @property {Boolean} closable
- * True if the tab is currently closable
- */
- childEls: [
- 'closeEl'
- ],
- scale: false,
- position: 'top',
- initComponent: function() {
- var me = this;
- me.addEvents(
- <span id='Ext-tab-Tab-event-activate'> /**
- </span> * @event activate
- * Fired when the tab is activated.
- * @param {Ext.tab.Tab} this
- */
- 'activate',
- <span id='Ext-tab-Tab-event-deactivate'> /**
- </span> * @event deactivate
- * Fired when the tab is deactivated.
- * @param {Ext.tab.Tab} this
- */
- 'deactivate',
- <span id='Ext-tab-Tab-event-beforeclose'> /**
- </span> * @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
- * @param {Ext.tab.Tab} tab The Tab object
- */
- 'beforeclose',
- <span id='Ext-tab-Tab-event-close'> /**
- </span> * @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) {
- me.setCard(me.card);
- }
- },
- getTemplateArgs: function() {
- var me = this,
- result = me.callParent();
- result.closable = me.closable;
- result.closeText = me.closeText;
- return result;
- },
- beforeRender: function() {
- var me = this,
- tabBar = me.up('tabbar'),
- tabPanel = me.up('tabpanel');
-
- me.callParent();
-
- 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;
- }
- }
- },
- onRender: function() {
- var me = this;
- me.callParent(arguments);
- me.keyNav = new 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;
- },
- // inherit docs
- disable : function(silent) {
- var me = this;
- me.callParent(arguments);
- me.addClsWithUI(me.position + '-disabled');
- return me;
- },
- onDestroy: function() {
- var me = this;
- Ext.destroy(me.keyNav);
- delete me.keyNav;
- me.callParent(arguments);
- },
- <span id='Ext-tab-Tab-method-setClosable'> /**
- </span> * 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)
- */
- setClosable: function(closable) {
- var me = this;
- // Closable must be true if no args
- closable = (!arguments.length || !!closable);
- if (me.closable != closable) {
- me.closable = closable;
- // set property on the user-facing item ('card'):
- if (me.card) {
- me.card.closable = closable;
- }
- me.syncClosableUI();
- if (me.rendered) {
- me.syncClosableElements();
- // Tab will change width to accommodate close icon
- me.updateLayout();
- }
- }
- },
- <span id='Ext-tab-Tab-method-syncClosableElements'> /**
- </span> * This method ensures that the closeBtn element exists or not based on 'closable'.
- * @private
- */
- syncClosableElements: function () {
- var me = this,
- closeEl = me.closeEl;
- if (me.closable) {
- if (!closeEl) {
- me.closeEl = me.btnWrap.insertSibling({
- tag: 'a',
- cls: me.baseCls + '-close-btn',
- href: '#',
- title: me.closeText
- }, 'after');
- }
- } else if (closeEl) {
- closeEl.remove();
- delete me.closeEl;
- }
- },
- <span id='Ext-tab-Tab-method-syncClosableUI'> /**
- </span> * This method ensures that the UI classes are added or removed based on 'closable'.
- * @private
- */
- syncClosableUI: function () {
- var me = this,
- classes = [me.closableCls, me.closableCls + '-' + me.position];
- if (me.closable) {
- me.addClsWithUI(classes);
- } else {
- me.removeClsWithUI(classes);
- }
- },
- <span id='Ext-tab-Tab-method-setCard'> /**
- </span> * 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
- */
- setCard: function(card) {
- var me = this;
- me.card = card;
- me.setText(me.title || card.title);
- me.setIconCls(me.iconCls || card.iconCls);
- me.setIcon(me.icon || card.icon);
- },
- <span id='Ext-tab-Tab-method-onCloseClick'> /**
- </span> * @private
- * Listener attached to click events on the Tab's close button
- */
- onCloseClick: function() {
- var me = this;
- if (me.fireEvent('beforeclose', me) !== false) {
- if (me.tabBar) {
- 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.fireClose();
- }
- }
- },
- <span id='Ext-tab-Tab-method-fireClose'> /**
- </span> * Fires the close event on the tab.
- * @private
- */
- fireClose: function(){
- this.fireEvent('close', this);
- },
- <span id='Ext-tab-Tab-method-onEnterKey'> /**
- </span> * @private
- */
- onEnterKey: function(e) {
- var me = this;
- if (me.tabBar) {
- me.tabBar.onClick(e, me.el);
- }
- },
- <span id='Ext-tab-Tab-method-onDeleteKey'> /**
- </span> * @private
- */
- onDeleteKey: function(e) {
- if (this.closable) {
- this.onCloseClick();
- }
- },
- // @private
- activate : function(supressEvent) {
- var me = this;
- me.active = true;
- me.addClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
- if (supressEvent !== true) {
- me.fireEvent('activate', me);
- }
- },
- // @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);
- }
- }
- });
- </pre>
- </body>
- </html>
|