Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / source / Bar.html
diff --git a/docs/source/Bar.html b/docs/source/Bar.html
new file mode 100644 (file)
index 0000000..58f31a0
--- /dev/null
@@ -0,0 +1,193 @@
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-tab.Bar'>/**
+</span> * @author Ed Spencer
+ * @class Ext.tab.Bar
+ * @extends Ext.panel.Header
+ * &lt;p&gt;TabBar is used internally by a {@link Ext.tab.Panel TabPanel} and wouldn't usually need to be created manually.&lt;/p&gt;
+ *
+ * @xtype tabbar
+ */
+Ext.define('Ext.tab.Bar', {
+    extend: 'Ext.panel.Header',
+    alias: 'widget.tabbar',
+    baseCls: Ext.baseCSSPrefix + 'tab-bar',
+
+    requires: [
+        'Ext.tab.Tab',
+        'Ext.FocusManager'
+    ],
+
+    // @private
+    defaultType: 'tab',
+
+<span id='Ext-tab.Bar-cfg-Boolean'>    /**
+</span>     * @cfg Boolean plain
+     * True to not show the full background on the tabbar
+     */
+    plain: false,
+
+    // @private
+    renderTpl: [
+        '&lt;div class=&quot;{baseCls}-body&lt;tpl if=&quot;ui&quot;&gt; {baseCls}-body-{ui}&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-body-{parent.ui}-{.}&lt;/tpl&gt;&lt;/tpl&gt;&quot;&lt;tpl if=&quot;bodyStyle&quot;&gt; style=&quot;{bodyStyle}&quot;&lt;/tpl&gt;&gt;&lt;/div&gt;',
+        '&lt;div class=&quot;{baseCls}-strip&lt;tpl if=&quot;ui&quot;&gt; {baseCls}-strip-{ui}&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-strip-{parent.ui}-{.}&lt;/tpl&gt;&lt;/tpl&gt;&quot;&gt;&lt;/div&gt;'
+    ],
+
+<span id='Ext-tab.Bar-cfg-minTabWidth'>    /**
+</span>     * @cfg {Number} minTabWidth The minimum width for each tab. Defaults to &lt;tt&gt;30&lt;/tt&gt;.
+     */
+    minTabWidth: 30,
+
+<span id='Ext-tab.Bar-cfg-maxTabWidth'>    /**
+</span>     * @cfg {Number} maxTabWidth The maximum width for each tab. Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
+     */
+    maxTabWidth: undefined,
+
+    // @private
+    initComponent: function() {
+        var me = this,
+            keys;
+
+        if (me.plain) {
+            me.setUI(me.ui + '-plain');
+        }
+        
+        me.addClsWithUI(me.dock);
+
+        me.addEvents(
+<span id='Ext-tab.Bar-event-change'>            /**
+</span>             * @event change
+             * Fired when the currently-active tab has changed
+             * @param {Ext.tab.Bar} tabBar The TabBar
+             * @param {Ext.Tab} tab The new Tab
+             * @param {Ext.Component} card The card that was just shown in the TabPanel
+             */
+            'change'
+        );
+
+        Ext.applyIf(this.renderSelectors, {
+            body : '.' + this.baseCls + '-body',
+            strip: '.' + this.baseCls + '-strip'
+        });
+        me.callParent(arguments);
+
+        // TabBar must override the Header's align setting.
+        me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
+        me.layout.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.Scroller', me.layout);
+        me.items.removeAt(me.items.getCount() - 1);
+        me.items.removeAt(me.items.getCount() - 1);
+        
+        // Subscribe to Ext.FocusManager for key navigation
+        keys = me.orientation == 'vertical' ? ['up', 'down'] : ['left', 'right'];
+        Ext.FocusManager.subscribe(me, {
+            keys: keys
+        });
+    },
+
+    // @private
+    onAdd: function(tab) {
+        var me = this,
+            tabPanel = me.tabPanel,
+            hasOwner = !!tabPanel;
+
+        me.callParent(arguments);
+        tab.position = me.dock;
+        if (hasOwner) {
+            tab.minWidth = tabPanel.minTabWidth;
+        }
+        else {
+            tab.minWidth = me.minTabWidth + (tab.iconCls ? 25 : 0);
+        }
+        tab.maxWidth = me.maxTabWidth || (hasOwner ? tabPanel.maxTabWidth : undefined);
+    },
+
+    // @private
+    afterRender: function() {
+        var me = this;
+
+        me.mon(me.el, {
+            scope: me,
+            click: me.onClick,
+            delegate: '.' + Ext.baseCSSPrefix + 'tab'
+        });
+        me.callParent(arguments);
+        
+    },
+
+    afterComponentLayout : function() {
+        var me = this;
+        
+        me.callParent(arguments);
+        me.strip.setWidth(me.el.getWidth());
+    },
+
+    // @private
+    onClick: function(e, target) {
+        // The target might not be a valid tab el.
+        var tab = Ext.getCmp(target.id),
+            tabPanel = this.tabPanel;
+
+        target = e.getTarget();
+
+        if (tab &amp;&amp; tab.isDisabled &amp;&amp; !tab.isDisabled()) {
+            if (tab.closable &amp;&amp; target === tab.closeEl.dom) {
+                tab.onCloseClick();
+            } else {
+                this.setActiveTab(tab);
+                if (tabPanel) {
+                    tabPanel.setActiveTab(tab.card);
+                }
+                tab.focus();
+            }
+        }
+    },
+
+<span id='Ext-tab.Bar-method-closeTab'>    /**
+</span>     * @private
+     * Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
+     * @param {Ext.Tab} tab The tab to close
+     */
+    closeTab: function(tab) {
+        var card    = tab.card,
+            tabPanel = this.tabPanel,
+            nextTab;
+
+        if (tab.active &amp;&amp; this.items.getCount() &gt; 1) {
+            nextTab = tab.next('tab') || this.items.items[0];
+            this.setActiveTab(nextTab);
+            if (tabPanel) {
+                tabPanel.setActiveTab(nextTab.card);
+            }
+        }
+        this.remove(tab);
+
+        if (tabPanel &amp;&amp; card) {
+            tabPanel.remove(card);
+        }
+        
+        if (nextTab) {
+            nextTab.focus();
+        }
+    },
+
+<span id='Ext-tab.Bar-method-setActiveTab'>    /**
+</span>     * @private
+     * Marks the given tab as active
+     * @param {Ext.Tab} tab The tab to mark active
+     */
+    setActiveTab: function(tab) {
+        if (tab.disabled) {
+            return;
+        }
+        var me = this;
+        if (me.activeTab) {
+            me.activeTab.deactivate();
+        }
+        tab.activate();
+        
+        if (me.rendered) {
+            me.layout.layout();
+            tab.el.scrollIntoView(me.layout.getRenderTarget());
+        }
+        me.activeTab = tab;
+        me.fireEvent('change', me, tab, tab.card);
+    }
+});</pre></pre></body></html>
\ No newline at end of file