开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > JavaScript > 查看源码
TabPanel.js
资源名称：ext-3.1.0.zip　[点击查看]
上传用户：dawnssy
上传日期：2022-08-06
资源大小：9345k
文件大小：40k
源码类别：

JavaScript

开发平台：

JavaScript

TabPanel.js：源码内容
  1. /*!
  2.  * Ext JS Library 3.1.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.TabPanel
  9.  * <p>A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel}
  10.  * for layout purposes, but also have special support for containing child Components
  11.  * (<tt>{@link Ext.Container#items items}</tt>) that are managed using a
  12.  * {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.</p>
  13.  *
  14.  * <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component
  15.  * and all its descendants. This makes the child tab Component, and all its descendants <b>unusable</b>. To enable
  16.  * re-use of a tab, configure the TabPanel with <b><code>{@link #autoDestroy autoDestroy: false}</code></b>.
  17.  *
  18.  * <p><b><u>TabPanel header/footer elements</u></b></p>
  19.  * <p>TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element
  20.  * (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
  21.  * This means that a TabPanel will not display any configured title, and will not display any
  22.  * configured header {@link Ext.Panel#tools tools}.</p>
  23.  * <p>To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses
  24.  * <b><tt>{@link Ext.Container#layout layout:'fit'}</tt></b>.</p>
  25.  *
  26.  * <p><b><u>Tab Events</u></b></p>
  27.  * <p>There is no actual tab class &mdash; each tab is simply a {@link Ext.BoxComponent Component}
  28.  * such as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component
  29.  * can fire additional events that only exist for tabs and are not available from other Components.
  30.  * These events are:</p>
  31.  * <div><ul class="mdetail-params">
  32.  * <li><tt><b>{@link Ext.Panel#activate activate}</b></tt> : Fires when this Component becomes
  33.  * the active tab.</li>
  34.  * <li><tt><b>{@link Ext.Panel#deactivate deactivate}</b></tt> : Fires when the Component that
  35.  * was the active tab becomes deactivated.</li>
  36.  * </ul></div>
  37.  * <p><b><u>Creating TabPanels from Code</u></b></p>
  38.  * <p>TabPanels can be created and rendered completely in code, as in this example:</p>
  39.  * <pre><code>
  40. var tabs = new Ext.TabPanel({
  41.     renderTo: Ext.getBody(),
  42.     activeTab: 0,
  43.     items: [{
  44.         title: 'Tab 1',
  45.         html: 'A simple tab'
  46.     },{
  47.         title: 'Tab 2',
  48.         html: 'Another one'
  49.     }]
  50. });
  51. </code></pre>
  52.  * <p><b><u>Creating TabPanels from Existing Markup</u></b></p>
  53.  * <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p>
  54.  * <div><ul class="mdetail-params">
  55.  *
  56.  * <li>Pre-Structured Markup</li>
  57.  * <div class="sub-desc">
  58.  * <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely
  59.  * from existing markup (See the {@link #autoTabs} example).</p>
  60.  * </div>
  61.  *
  62.  * <li>Un-Structured Markup</li>
  63.  * <div class="sub-desc">
  64.  * <p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
  65.  * which elements should be the container and the tabs. Using this method tab content can be pulled from different
  66.  * elements within the page by id regardless of page structure. For example:</p>
  67.  * <pre><code>
  68. var tabs = new Ext.TabPanel({
  69.     renderTo: 'my-tabs',
  70.     activeTab: 0,
  71.     items:[
  72.         {contentEl:'tab1', title:'Tab 1'},
  73.         {contentEl:'tab2', title:'Tab 2'}
  74.     ]
  75. });
  77. // Note that the tabs do not have to be nested within the container (although they can be)
  78. &lt;div id="my-tabs">&lt;/div>
  79. &lt;div id="tab1" class="x-hide-display">A simple tab&lt;/div>
  80. &lt;div id="tab2" class="x-hide-display">Another one&lt;/div>
  81. </code></pre>
  82.  * Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered
  83.  * deferred without displaying outside the tabs. You could alternately set <tt>{@link #deferredRender} = false </tt>
  84.  * to render all content tabs on page load.
  85.  * </div>
  86.  *
  87.  * </ul></div>
  88.  *
  89.  * @extends Ext.Panel
  90.  * @constructor
  91.  * @param {Object} config The configuration options
  92.  * @xtype tabpanel
  93.  */
  94. Ext.TabPanel = Ext.extend(Ext.Panel,  {
  95.     /**
  96.      * @cfg {Boolean} layoutOnTabChange
  97.      * Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
  98.      * See {@link Ext.layout.CardLayout}.<code>{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>.
  99.      */
  100.     /**
  101.      * @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS
  102.      * class name applied to the tab strip item representing the child Component, allowing special
  103.      * styling to be applied.
  104.      */
  105.     /**
  106.      * @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on
  107.      * browser resize (defaults to true).
  108.      */
  109.     monitorResize : true,
  110.     /**
  111.      * @cfg {Boolean} deferredRender
  112.      * <p><tt>true</tt> by default to defer the rendering of child <tt>{@link Ext.Container#items items}</tt>
  113.      * to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained
  114.      * <tt>{@link Ext.Container#items items}</tt> as soon as the {@link Ext.layout.CardLayout layout}
  115.      * is rendered. If there is a significant amount of content or a lot of heavy controls being
  116.      * rendered into panels that are not displayed by default, setting this to <tt>true</tt> might
  117.      * improve performance.</p>
  118.      * <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for
  119.      * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender}
  120.      * configuration value.</p>
  121.      * <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content
  122.      * within an unactivated tab will not be available. For example, this means that if the TabPanel
  123.      * is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within
  124.      * unactivated tabs will not be rendered, and will therefore not be submitted and will not be
  125.      * available to either {@link Ext.form.BasicForm#getValues getValues} or
  126.      * {@link Ext.form.BasicForm#setValues setValues}.</p>
  127.      */
  128.     deferredRender : true,
  129.     /**
  130.      * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
  131.      */
  132.     tabWidth : 120,
  133.     /**
  134.      * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
  135.      */
  136.     minTabWidth : 30,
  137.     /**
  138.      * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
  139.      * tab strip (defaults to false).  Setting this to true may cause specific widths that might be set per tab to
  140.      * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
  141.      */
  142.     resizeTabs : false,
  143.     /**
  144.      * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
  145.      * overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
  146.      */
  147.     enableTabScroll : false,
  148.     /**
  149.      * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed
  150.      * (defaults to <tt>100</tt>, or if <tt>{@link #resizeTabs} = true</tt>, the calculated tab width).  Only
  151.      * applies when <tt>{@link #enableTabScroll} = true</tt>.
  152.      */
  153.     scrollIncrement : 0,
  154.     /**
  155.      * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
  156.      * continuously pressed (defaults to <tt>400</tt>).
  157.      */
  158.     scrollRepeatInterval : 400,
  159.     /**
  160.      * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults
  161.      * to <tt>.35</tt>). Only applies when <tt>{@link #animScroll} = true</tt>.
  162.      */
  163.     scrollDuration : 0.35,
  164.     /**
  165.      * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
  166.      * to <tt>true</tt>).  Only applies when <tt>{@link #enableTabScroll} = true</tt>.
  167.      */
  168.     animScroll : true,
  169.     /**
  170.      * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to <tt>'top'</tt>).
  171.      * The only other supported value is <tt>'bottom'</tt>.  <b>Note</b>: tab scrolling is only supported for
  172.      * <tt>tabPosition: 'top'</tt>.
  173.      */
  174.     tabPosition : 'top',
  175.     /**
  176.      * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
  177.      */
  178.     baseCls : 'x-tab-panel',
  179.     /**
  180.      * @cfg {Boolean} autoTabs
  181.      * <p><tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted
  182.      * to tabs and added to this panel (defaults to <tt>false</tt>).  Note that the query will be executed within
  183.      * the scope of the container element only (so that multiple tab panels from markup can be supported via this
  184.      * method).</p>
  185.      * <p>This method is only possible when the markup is structured correctly as a container with nested divs
  186.      * containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content
  187.      * from other elements on the page, see the example at the top of the class for generating tabs from markup.</p>
  188.      * <p>There are a couple of things to note when using this method:<ul>
  189.      * <li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's
  190.      * {@link #items} collection), you must use <tt>{@link #applyTo}</tt> to correctly use the specified <tt>id</tt>
  191.      * as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel
  192.      * components.</li>
  193.      * <li>Make sure that you set <tt>{@link #deferredRender}: false</tt> so that the content elements for each
  194.      * tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed
  195.      * until each tab is activated and will be visible outside the TabPanel.</li>
  196.      * </ul>Example usage:</p>
  197.      * <pre><code>
  198. var tabs = new Ext.TabPanel({
  199.     applyTo: 'my-tabs',
  200.     activeTab: 0,
  201.     deferredRender: false,
  202.     autoTabs: true
  203. });
  205. // This markup will be converted to a TabPanel from the code above
  206. &lt;div id="my-tabs">
  207.     &lt;div class="x-tab" title="Tab 1">A simple tab&lt;/div>
  208.     &lt;div class="x-tab" title="Tab 2">Another one&lt;/div>
  209. &lt;/div>
  210. </code></pre>
  211.      */
  212.     autoTabs : false,
  213.     /**
  214.      * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when
  215.      * <tt>{@link #autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>).  This can be any valid selector
  216.      * supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this
  217.      * tab panel only (so that multiple tab panels from markup can be supported on a page).
  218.      */
  219.     autoTabSelector : 'div.x-tab',
  220.     /**
  221.      * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
  222.      * activated on render (defaults to undefined).
  223.      */
  224.     activeTab : undefined,
  225.     /**
  226.      * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of
  227.      * tabs. If you change the margin in CSS, you will need to update this value so calculations are correct
  228.      * with either <tt>{@link #resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>)
  229.      */
  230.     tabMargin : 2,
  231.     /**
  232.      * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
  233.      * (defaults to <tt>false</tt>).
  234.      */
  235.     plain : false,
  236.     /**
  237.      * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
  238.      * scrolling (defaults to <tt>20</tt>).
  239.      */
  240.     wheelIncrement : 20,
  242.     /*
  243.      * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
  244.      * It does not generally need to be changed, but can be if external code also uses an id scheme that can
  245.      * potentially clash with this one.
  246.      */
  247.     idDelimiter : '__',
  249.     // private
  250.     itemCls : 'x-tab-item',
  252.     // private config overrides
  253.     elements : 'body',
  254.     headerAsText : false,
  255.     frame : false,
  256.     hideBorders :true,
  258.     // private
  259.     initComponent : function(){
  260.         this.frame = false;
  261.         Ext.TabPanel.superclass.initComponent.call(this);
  262.         this.addEvents(
  263.             /**
  264.              * @event beforetabchange
  265.              * Fires before the active tab changes. Handlers can <tt>return false</tt> to cancel the tab change.
  266.              * @param {TabPanel} this
  267.              * @param {Panel} newTab The tab being activated
  268.              * @param {Panel} currentTab The current active tab
  269.              */
  270.             'beforetabchange',
  271.             /**
  272.              * @event tabchange
  273.              * Fires after the active tab has changed.
  274.              * @param {TabPanel} this
  275.              * @param {Panel} tab The new active tab
  276.              */
  277.             'tabchange',
  278.             /**
  279.              * @event contextmenu
  280.              * Relays the contextmenu event from a tab selector element in the tab strip.
  281.              * @param {TabPanel} this
  282.              * @param {Panel} tab The target tab
  283.              * @param {EventObject} e
  284.              */
  285.             'contextmenu'
  286.         );
  287.         /**
  288.          * @cfg {Object} layoutConfig
  289.          * TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager.
  290.          * <code>layoutConfig</code> may be used to configure this layout manager.
  291.          * <code>{@link #deferredRender}</code> and <code>{@link #layoutOnTabChange}</code>
  292.          * configured on the TabPanel will be applied as configs to the layout manager.
  293.          */
  294.         this.setLayout(new Ext.layout.CardLayout(Ext.apply({
  295.             layoutOnCardChange: this.layoutOnTabChange,
  296.             deferredRender: this.deferredRender
  297.         }, this.layoutConfig)));
  299.         if(this.tabPosition == 'top'){
  300.             this.elements += ',header';
  301.             this.stripTarget = 'header';
  302.         }else {
  303.             this.elements += ',footer';
  304.             this.stripTarget = 'footer';
  305.         }
  306.         if(!this.stack){
  307.             this.stack = Ext.TabPanel.AccessStack();
  308.         }
  309.         this.initItems();
  310.     },
  312.     // private
  313.     onRender : function(ct, position){
  314.         Ext.TabPanel.superclass.onRender.call(this, ct, position);
  316.         if(this.plain){
  317.             var pos = this.tabPosition == 'top' ? 'header' : 'footer';
  318.             this[pos].addClass('x-tab-panel-'+pos+'-plain');
  319.         }
  321.         var st = this[this.stripTarget];
  323.         this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
  324.             tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
  326.         var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
  327.         st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
  328.         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
  330.         // create an empty span with class x-tab-strip-text to force the height of the header element when there's no tabs.
  331.         this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text', cn: '&#160;'}]});
  332.         this.strip.createChild({cls:'x-clear'});
  334.         this.body.addClass('x-tab-panel-body-'+this.tabPosition);
  336.         /**
  337.          * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or
  338.          * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
  339.          * <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
  340.          * <p>The main element created should be a <tt>&lt;li></tt> element. In order for a click event on
  341.          * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
  342.          * native <tt>{@link #getTemplateArgs}</tt>.</p>
  343.          * <p>The child element which contains the title text must be marked by the CSS class
  344.          * <tt>x-tab-strip-inner</tt>.</p>
  345.          * <p>To enable closability, the created element should contain an element marked by the CSS class
  346.          * <tt>x-tab-strip-close</tt>.</p>
  347.          * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS
  348.          * style rules to create the desired appearance.</p>
  349.          * Below is an example of how to create customized tab selector items:<pre><code>
  350. new Ext.TabPanel({
  351.     renderTo: document.body,
  352.     minTabWidth: 115,
  353.     tabWidth: 135,
  354.     enableTabScroll: true,
  355.     width: 600,
  356.     height: 250,
  357.     defaults: {autoScroll:true},
  358.     itemTpl: new Ext.XTemplate(
  359.     '&lt;li class="{cls}" id="{id}" style="overflow:hidden">',
  360.          '&lt;tpl if="closable">',
  361.             '&lt;a class="x-tab-strip-close">&lt;/a>',
  362.          '&lt;/tpl>',
  363.          '&lt;a class="x-tab-right" href="#" style="padding-left:6px">',
  364.             '&lt;em class="x-tab-left">',
  365.                 '&lt;span class="x-tab-strip-inner">',
  366.                     '&lt;img src="{src}" style="float:left;margin:3px 3px 0 0">',
  367.                     '&lt;span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}&lt;/span>',
  368.                 '&lt;/span>',
  369.             '&lt;/em>',
  370.         '&lt;/a>',
  371.     '&lt;/li>'
  372.     ),
  373.     getTemplateArgs: function(item) {
  374. //      Call the native method to collect the base data. Like the ID!
  375.         var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
  377. //      Add stuff used in our template
  378.         return Ext.apply(result, {
  379.             closable: item.closable,
  380.             src: item.iconSrc,
  381.             extra: item.extraText || ''
  382.         });
  383.     },
  384.     items: [{
  385.         title: 'New Tab 1',
  386.         iconSrc: '../shared/icons/fam/grid.png',
  387.         html: 'Tab Body 1',
  388.         closable: true
  389.     }, {
  390.         title: 'New Tab 2',
  391.         iconSrc: '../shared/icons/fam/grid.png',
  392.         html: 'Tab Body 2',
  393.         extraText: 'Extra stuff in the tab button'
  394.     }]
  395. });
  396. </code></pre>
  397.          */
  398.         if(!this.itemTpl){
  399.             var tt = new Ext.Template(
  400.                  '<li class="{cls}" id="{id}"><a class="x-tab-strip-close"></a>',
  401.                  '<a class="x-tab-right" href="#"><em class="x-tab-left">',
  402.                  '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
  403.                  '</em></a></li>'
  404.             );
  405.             tt.disableFormats = true;
  406.             tt.compile();
  407.             Ext.TabPanel.prototype.itemTpl = tt;
  408.         }
  410.         this.items.each(this.initTab, this);
  411.     },
  413.     // private
  414.     afterRender : function(){
  415.         Ext.TabPanel.superclass.afterRender.call(this);
  416.         if(this.autoTabs){
  417.             this.readTabs(false);
  418.         }
  419.         if(this.activeTab !== undefined){
  420.             var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
  421.             delete this.activeTab;
  422.             this.setActiveTab(item);
  423.         }
  424.     },
  426.     // private
  427.     initEvents : function(){
  428.         Ext.TabPanel.superclass.initEvents.call(this);
  429.         this.mon(this.strip, {
  430.             scope: this,
  431.             mousedown: this.onStripMouseDown,
  432.             contextmenu: this.onStripContextMenu
  433.         });
  434.         if(this.enableTabScroll){
  435.             this.mon(this.strip, 'mousewheel', this.onWheel, this);
  436.         }
  437.     },
  439.     // private
  440.     findTargets : function(e){
  441.         var item = null;
  442.         var itemEl = e.getTarget('li', this.strip);
  443.         if(itemEl){
  444.             item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
  445.             if(item.disabled){
  446.                 return {
  447.                     close : null,
  448.                     item : null,
  449.                     el : null
  450.                 };
  451.             }
  452.         }
  453.         return {
  454.             close : e.getTarget('.x-tab-strip-close', this.strip),
  455.             item : item,
  456.             el : itemEl
  457.         };
  458.     },
  460.     // private
  461.     onStripMouseDown : function(e){
  462.         if(e.button !== 0){
  463.             return;
  464.         }
  465.         e.preventDefault();
  466.         var t = this.findTargets(e);
  467.         if(t.close){
  468.             if (t.item.fireEvent('beforeclose', t.item) !== false) {
  469.                 t.item.fireEvent('close', t.item);
  470.                 this.remove(t.item);
  471.             }
  472.             return;
  473.         }
  474.         if(t.item && t.item != this.activeTab){
  475.             this.setActiveTab(t.item);
  476.         }
  477.     },
  479.     // private
  480.     onStripContextMenu : function(e){
  481.         e.preventDefault();
  482.         var t = this.findTargets(e);
  483.         if(t.item){
  484.             this.fireEvent('contextmenu', this, t.item, e);
  485.         }
  486.     },
  488.     /**
  489.      * True to scan the markup in this tab panel for <tt>{@link #autoTabs}</tt> using the
  490.      * <tt>{@link #autoTabSelector}</tt>
  491.      * @param {Boolean} removeExisting True to remove existing tabs
  492.      */
  493.     readTabs : function(removeExisting){
  494.         if(removeExisting === true){
  495.             this.items.each(function(item){
  496.                 this.remove(item);
  497.             }, this);
  498.         }
  499.         var tabs = this.el.query(this.autoTabSelector);
  500.         for(var i = 0, len = tabs.length; i < len; i++){
  501.             var tab = tabs[i],
  502.                 title = tab.getAttribute('title');
  503.             tab.removeAttribute('title');
  504.             this.add({
  505.                 title: title,
  506.                 contentEl: tab
  507.             });
  508.         }
  509.     },
  511.     // private
  512.     initTab : function(item, index){
  513.         var before = this.strip.dom.childNodes[index],
  514.             p = this.getTemplateArgs(item),
  515.             el = before ?
  516.                  this.itemTpl.insertBefore(before, p) :
  517.                  this.itemTpl.append(this.strip, p),
  518.             cls = 'x-tab-strip-over',
  519.             tabEl = Ext.get(el);
  521.         tabEl.hover(function(){
  522.             if(!item.disabled){
  523.                 tabEl.addClass(cls);
  524.             }
  525.         }, function(){
  526.             tabEl.removeClass(cls);
  527.         });
  529.         if(item.tabTip){
  530.             tabEl.child('span.x-tab-strip-text', true).qtip = item.tabTip;
  531.         }
  532.         item.tabEl = el;
  534.         // Route *keyboard triggered* click events to the tab strip mouse handler.
  535.         tabEl.select('a').on('click', function(e){
  536.             if(!e.getPageX()){
  537.                 this.onStripMouseDown(e);
  538.             }
  539.         }, this, {preventDefault: true});
  541.         item.on({
  542.             scope: this,
  543.             disable: this.onItemDisabled,
  544.             enable: this.onItemEnabled,
  545.             titlechange: this.onItemTitleChanged,
  546.             iconchange: this.onItemIconChanged,
  547.             beforeshow: this.onBeforeShowItem
  548.         });
  549.     },
  550.     
  551.     
  553.     /**
  554.      * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
  555.      * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt>
  556.      * to create a formatted, clickable tab selector element. The properties which must be returned
  557.      * are:</p><div class="mdetail-params"><ul>
  558.      * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
  559.      * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
  560.      * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
  561.      * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li>
  562.      * </ul></div>
  563.      * @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
  564.      * @return {Object} An object hash containing the properties required to render the selector element.
  565.      */
  566.     getTemplateArgs : function(item) {
  567.         var cls = item.closable ? 'x-tab-strip-closable' : '';
  568.         if(item.disabled){
  569.             cls += ' x-item-disabled';
  570.         }
  571.         if(item.iconCls){
  572.             cls += ' x-tab-with-icon';
  573.         }
  574.         if(item.tabCls){
  575.             cls += ' ' + item.tabCls;
  576.         }
  578.         return {
  579.             id: this.id + this.idDelimiter + item.getItemId(),
  580.             text: item.title,
  581.             cls: cls,
  582.             iconCls: item.iconCls || ''
  583.         };
  584.     },
  586.     // private
  587.     onAdd : function(c){
  588.         Ext.TabPanel.superclass.onAdd.call(this, c);
  589.         if(this.rendered){
  590.             var items = this.items;
  591.             this.initTab(c, items.indexOf(c));
  592.             if(items.getCount() == 1){
  593.                 this.syncSize();
  594.             }
  595.             this.delegateUpdates();
  596.         }
  597.     },
  599.     // private
  600.     onBeforeAdd : function(item){
  601.         var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
  602.         if(existing){
  603.             this.setActiveTab(item);
  604.             return false;
  605.         }
  606.         Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
  607.         var es = item.elements;
  608.         item.elements = es ? es.replace(',header', '') : es;
  609.         item.border = (item.border === true);
  610.     },
  612.     // private
  613.     onRemove : function(c){
  614.         var te = Ext.get(c.tabEl);
  615.         // check if the tabEl exists, it won't if the tab isn't rendered
  616.         if(te){
  617.             te.select('a').removeAllListeners();
  618.             Ext.destroy(te);
  619.         }
  620.         Ext.TabPanel.superclass.onRemove.call(this, c);
  621.         this.stack.remove(c);
  622.         delete c.tabEl;
  623.         c.un('disable', this.onItemDisabled, this);
  624.         c.un('enable', this.onItemEnabled, this);
  625.         c.un('titlechange', this.onItemTitleChanged, this);
  626.         c.un('iconchange', this.onItemIconChanged, this);
  627.         c.un('beforeshow', this.onBeforeShowItem, this);
  628.         if(c == this.activeTab){
  629.             var next = this.stack.next();
  630.             if(next){
  631.                 this.setActiveTab(next);
  632.             }else if(this.items.getCount() > 0){
  633.                 this.setActiveTab(0);
  634.             }else{
  635.                 this.setActiveTab(null);
  636.             }
  637.         }
  638.         if(!this.destroying){
  639.             this.delegateUpdates();
  640.         }
  641.     },
  643.     // private
  644.     onBeforeShowItem : function(item){
  645.         if(item != this.activeTab){
  646.             this.setActiveTab(item);
  647.             return false;
  648.         }
  649.     },
  651.     // private
  652.     onItemDisabled : function(item){
  653.         var el = this.getTabEl(item);
  654.         if(el){
  655.             Ext.fly(el).addClass('x-item-disabled');
  656.         }
  657.         this.stack.remove(item);
  658.     },
  660.     // private
  661.     onItemEnabled : function(item){
  662.         var el = this.getTabEl(item);
  663.         if(el){
  664.             Ext.fly(el).removeClass('x-item-disabled');
  665.         }
  666.     },
  668.     // private
  669.     onItemTitleChanged : function(item){
  670.         var el = this.getTabEl(item);
  671.         if(el){
  672.             Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
  673.         }
  674.     },
  676.     //private
  677.     onItemIconChanged : function(item, iconCls, oldCls){
  678.         var el = this.getTabEl(item);
  679.         if(el){
  680.             el = Ext.get(el);
  681.             el.child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
  682.             el[Ext.isEmpty(iconCls) ? 'removeClass' : 'addClass']('x-tab-with-icon');
  683.         }
  684.     },
  686.     /**
  687.      * Gets the DOM element for the tab strip item which activates the child panel with the specified
  688.      * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
  689.      * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
  690.      * @return {HTMLElement} The DOM node
  691.      */
  692.     getTabEl : function(item){
  693.         var c = this.getComponent(item);
  694.         return c ? c.tabEl : null;
  695.     },
  697.     // private
  698.     onResize : function(){
  699.         Ext.TabPanel.superclass.onResize.apply(this, arguments);
  700.         this.delegateUpdates();
  701.     },
  703.     /**
  704.      * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
  705.      */
  706.     beginUpdate : function(){
  707.         this.suspendUpdates = true;
  708.     },
  710.     /**
  711.      * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
  712.      */
  713.     endUpdate : function(){
  714.         this.suspendUpdates = false;
  715.         this.delegateUpdates();
  716.     },
  718.     /**
  719.      * Hides the tab strip item for the passed tab
  720.      * @param {Number/String/Panel} item The tab index, id or item
  721.      */
  722.     hideTabStripItem : function(item){
  723.         item = this.getComponent(item);
  724.         var el = this.getTabEl(item);
  725.         if(el){
  726.             el.style.display = 'none';
  727.             this.delegateUpdates();
  728.         }
  729.         this.stack.remove(item);
  730.     },
  732.     /**
  733.      * Unhides the tab strip item for the passed tab
  734.      * @param {Number/String/Panel} item The tab index, id or item
  735.      */
  736.     unhideTabStripItem : function(item){
  737.         item = this.getComponent(item);
  738.         var el = this.getTabEl(item);
  739.         if(el){
  740.             el.style.display = '';
  741.             this.delegateUpdates();
  742.         }
  743.     },
  745.     // private
  746.     delegateUpdates : function(){
  747.         if(this.suspendUpdates){
  748.             return;
  749.         }
  750.         if(this.resizeTabs && this.rendered){
  751.             this.autoSizeTabs();
  752.         }
  753.         if(this.enableTabScroll && this.rendered){
  754.             this.autoScrollTabs();
  755.         }
  756.     },
  758.     // private
  759.     autoSizeTabs : function(){
  760.         var count = this.items.length,
  761.             ce = this.tabPosition != 'bottom' ? 'header' : 'footer',
  762.             ow = this[ce].dom.offsetWidth,
  763.             aw = this[ce].dom.clientWidth;
  765.         if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
  766.             return;
  767.         }
  769.         var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
  770.         this.lastTabWidth = each;
  771.         var lis = this.strip.query("li:not([className^=x-tab-edge])");
  772.         for(var i = 0, len = lis.length; i < len; i++) {
  773.             var li = lis[i],
  774.                 inner = Ext.fly(li).child('.x-tab-strip-inner', true),
  775.                 tw = li.offsetWidth,
  776.                 iw = inner.offsetWidth;
  777.             inner.style.width = (each - (tw-iw)) + 'px';
  778.         }
  779.     },
  781.     // private
  782.     adjustBodyWidth : function(w){
  783.         if(this.header){
  784.             this.header.setWidth(w);
  785.         }
  786.         if(this.footer){
  787.             this.footer.setWidth(w);
  788.         }
  789.         return w;
  790.     },
  792.     /**
  793.      * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
  794.      * can <tt>return false</tt> to cancel the tab change.
  795.      * @param {String/Number} item
  796.      * The id or tab Panel to activate. This parameter may be any of the following:
  797.      * <div><ul class="mdetail-params">
  798.      * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
  799.      * or <code>{@link Ext.Component#id id}</code> of the child component </li>
  800.      * <li>a <b><tt>Number</tt></b> : representing the position of the child component
  801.      * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
  802.      * </ul></div>
  803.      * <p>For additional information see {@link Ext.util.MixedCollection#get}.
  804.      */
  805.     setActiveTab : function(item){
  806.         item = this.getComponent(item);
  807.         if(this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
  808.             return;
  809.         }
  810.         if(!this.rendered){
  811.             this.activeTab = item;
  812.             return;
  813.         }
  814.         if(this.activeTab != item){
  815.             if(this.activeTab){
  816.                 var oldEl = this.getTabEl(this.activeTab);
  817.                 if(oldEl){
  818.                     Ext.fly(oldEl).removeClass('x-tab-strip-active');
  819.                 }
  820.             }
  821.             if(item){
  822.                 var el = this.getTabEl(item);
  823.                 Ext.fly(el).addClass('x-tab-strip-active');
  824.                 this.activeTab = item;
  825.                 this.stack.add(item);
  827.                 this.layout.setActiveItem(item);
  828.                 if(this.scrolling){
  829.                     this.scrollToTab(item, this.animScroll);
  830.                 }
  831.             }
  832.             this.fireEvent('tabchange', this, item);
  833.         }
  834.     },
  836.     /**
  837.      * Returns the Component which is the currently active tab. <b>Note that before the TabPanel
  838.      * first activates a child Component, this method will return whatever was configured in the
  839.      * {@link #activeTab} config option.</b>
  840.      * @return {BoxComponent} The currently active child Component if one <i>is</i> active, or the {@link #activeTab} config value.
  841.      */
  842.     getActiveTab : function(){
  843.         return this.activeTab || null;
  844.     },
  846.     /**
  847.      * Gets the specified tab by id.
  848.      * @param {String} id The tab id
  849.      * @return {Panel} The tab
  850.      */
  851.     getItem : function(item){
  852.         return this.getComponent(item);
  853.     },
  855.     // private
  856.     autoScrollTabs : function(){
  857.         this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
  858.         var count = this.items.length,
  859.             ow = this.pos.dom.offsetWidth,
  860.             tw = this.pos.dom.clientWidth,
  861.             wrap = this.stripWrap,
  862.             wd = wrap.dom,
  863.             cw = wd.offsetWidth,
  864.             pos = this.getScrollPos(),
  865.             l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
  867.         if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
  868.             return;
  869.         }
  870.         if(l <= tw){
  871.             wd.scrollLeft = 0;
  872.             wrap.setWidth(tw);
  873.             if(this.scrolling){
  874.                 this.scrolling = false;
  875.                 this.pos.removeClass('x-tab-scrolling');
  876.                 this.scrollLeft.hide();
  877.                 this.scrollRight.hide();
  878.                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
  879.                 if(Ext.isAir || Ext.isWebKit){
  880.                     wd.style.marginLeft = '';
  881.                     wd.style.marginRight = '';
  882.                 }
  883.             }
  884.         }else{
  885.             if(!this.scrolling){
  886.                 this.pos.addClass('x-tab-scrolling');
  887.                 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
  888.                 if(Ext.isAir || Ext.isWebKit){
  889.                     wd.style.marginLeft = '18px';
  890.                     wd.style.marginRight = '18px';
  891.                 }
  892.             }
  893.             tw -= wrap.getMargins('lr');
  894.             wrap.setWidth(tw > 20 ? tw : 20);
  895.             if(!this.scrolling){
  896.                 if(!this.scrollLeft){
  897.                     this.createScrollers();
  898.                 }else{
  899.                     this.scrollLeft.show();
  900.                     this.scrollRight.show();
  901.                 }
  902.             }
  903.             this.scrolling = true;
  904.             if(pos > (l-tw)){ // ensure it stays within bounds
  905.                 wd.scrollLeft = l-tw;
  906.             }else{ // otherwise, make sure the active tab is still visible
  907.                 this.scrollToTab(this.activeTab, false);
  908.             }
  909.             this.updateScrollButtons();
  910.         }
  911.     },
  913.     // private
  914.     createScrollers : function(){
  915.         this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
  916.         var h = this.stripWrap.dom.offsetHeight;
  918.         // left
  919.         var sl = this.pos.insertFirst({
  920.             cls:'x-tab-scroller-left'
  921.         });
  922.         sl.setHeight(h);
  923.         sl.addClassOnOver('x-tab-scroller-left-over');
  924.         this.leftRepeater = new Ext.util.ClickRepeater(sl, {
  925.             interval : this.scrollRepeatInterval,
  926.             handler: this.onScrollLeft,
  927.             scope: this
  928.         });
  929.         this.scrollLeft = sl;
  931.         // right
  932.         var sr = this.pos.insertFirst({
  933.             cls:'x-tab-scroller-right'
  934.         });
  935.         sr.setHeight(h);
  936.         sr.addClassOnOver('x-tab-scroller-right-over');
  937.         this.rightRepeater = new Ext.util.ClickRepeater(sr, {
  938.             interval : this.scrollRepeatInterval,
  939.             handler: this.onScrollRight,
  940.             scope: this
  941.         });
  942.         this.scrollRight = sr;
  943.     },
  945.     // private
  946.     getScrollWidth : function(){
  947.         return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
  948.     },
  950.     // private
  951.     getScrollPos : function(){
  952.         return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
  953.     },
  955.     // private
  956.     getScrollArea : function(){
  957.         return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
  958.     },
  960.     // private
  961.     getScrollAnim : function(){
  962.         return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
  963.     },
  965.     // private
  966.     getScrollIncrement : function(){
  967.         return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
  968.     },
  970.     /**
  971.      * Scrolls to a particular tab if tab scrolling is enabled
  972.      * @param {Panel} item The item to scroll to
  973.      * @param {Boolean} animate True to enable animations
  974.      */
  976.     scrollToTab : function(item, animate){
  977.         if(!item){ 
  978.             return; 
  979.         }
  980.         var el = this.getTabEl(item),
  981.             pos = this.getScrollPos(), 
  982.             area = this.getScrollArea(),
  983.             left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos,
  984.             right = left + el.offsetWidth;
  985.         if(left < pos){
  986.             this.scrollTo(left, animate);
  987.         }else if(right > (pos + area)){
  988.             this.scrollTo(right - area, animate);
  989.         }
  990.     },
  992.     // private
  993.     scrollTo : function(pos, animate){
  994.         this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
  995.         if(!animate){
  996.             this.updateScrollButtons();
  997.         }
  998.     },
  1000.     onWheel : function(e){
  1001.         var d = e.getWheelDelta()*this.wheelIncrement*-1;
  1002.         e.stopEvent();
  1004.         var pos = this.getScrollPos(),
  1005.             newpos = pos + d,
  1006.             sw = this.getScrollWidth()-this.getScrollArea();
  1008.         var s = Math.max(0, Math.min(sw, newpos));
  1009.         if(s != pos){
  1010.             this.scrollTo(s, false);
  1011.         }
  1012.     },
  1014.     // private
  1015.     onScrollRight : function(){
  1016.         var sw = this.getScrollWidth()-this.getScrollArea(),
  1017.             pos = this.getScrollPos(),
  1018.             s = Math.min(sw, pos + this.getScrollIncrement());
  1019.         if(s != pos){
  1020.             this.scrollTo(s, this.animScroll);
  1021.         }
  1022.     },
  1024.     // private
  1025.     onScrollLeft : function(){
  1026.         var pos = this.getScrollPos(),
  1027.             s = Math.max(0, pos - this.getScrollIncrement());
  1028.         if(s != pos){
  1029.             this.scrollTo(s, this.animScroll);
  1030.         }
  1031.     },
  1033.     // private
  1034.     updateScrollButtons : function(){
  1035.         var pos = this.getScrollPos();
  1036.         this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
  1037.         this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
  1038.     },
  1040.     // private
  1041.     beforeDestroy : function() {
  1042.         Ext.destroy(this.leftRepeater, this.rightRepeater);
  1043.         this.deleteMembers('strip', 'edge', 'scrollLeft', 'scrollRight', 'stripWrap');
  1044.         this.activeTab = null;
  1045.         Ext.TabPanel.superclass.beforeDestroy.apply(this);
  1046.     }
  1048.     /**
  1049.      * @cfg {Boolean} collapsible
  1050.      * @hide
  1051.      */
  1052.     /**
  1053.      * @cfg {String} header
  1054.      * @hide
  1055.      */
  1056.     /**
  1057.      * @cfg {Boolean} headerAsText
  1058.      * @hide
  1059.      */
  1060.     /**
  1061.      * @property header
  1062.      * @hide
  1063.      */
  1064.     /**
  1065.      * @cfg title
  1066.      * @hide
  1067.      */
  1068.     /**
  1069.      * @cfg {Array} tools
  1070.      * @hide
  1071.      */
  1072.     /**
  1073.      * @cfg {Array} toolTemplate
  1074.      * @hide
  1075.      */
  1076.     /**
  1077.      * @cfg {Boolean} hideCollapseTool
  1078.      * @hide
  1079.      */
  1080.     /**
  1081.      * @cfg {Boolean} titleCollapse
  1082.      * @hide
  1083.      */
  1084.     /**
  1085.      * @cfg {Boolean} collapsed
  1086.      * @hide
  1087.      */
  1088.     /**
  1089.      * @cfg {String} layout
  1090.      * @hide
  1091.      */
  1092.     /**
  1093.      * @cfg {Boolean} preventBodyReset
  1094.      * @hide
  1095.      */
  1096. });
  1097. Ext.reg('tabpanel', Ext.TabPanel);
  1099. /**
  1100.  * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
  1101.  * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
  1102.  * @param {String/Panel} tab The id or tab Panel to activate
  1103.  * @method activate
  1104.  */
  1105. Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
  1107. // private utility class used by TabPanel
  1108. Ext.TabPanel.AccessStack = function(){
  1109.     var items = [];
  1110.     return {
  1111.         add : function(item){
  1112.             items.push(item);
  1113.             if(items.length > 10){
  1114.                 items.shift();
  1115.             }
  1116.         },
  1118.         remove : function(item){
  1119.             var s = [];
  1120.             for(var i = 0, len = items.length; i < len; i++) {
  1121.                 if(items[i] != item){
  1122.                     s.push(items[i]);
  1123.                 }
  1124.             }
  1125.             items = s;
  1126.         },
  1128.         next : function(){
  1129.             return items.pop();
  1130.         }
  1131.     };
  1132. };