Clear Up
SharpKit Reference

Panel Class

A basic tab container. TabPanels can be used exactly like a standard Ext.panel.Panel for layout purposes, but also have special support for containing child Components (items) that are managed using a CardLayout layout manager, and displayed as separate tabs.

Note: By default, a tab's close tool destroys the child tab Component and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable re-use of a tab, configure the TabPanel with autoDestroy: false.

TabPanel's layout

TabPanels use a Dock layout to position the TabBar at the top of the widget. Panels added to the TabPanel will have their header hidden by default because the Tab will automatically take the Panel's configured title and icon.

TabPanels use their header or footer element (depending on the tabPosition configuration) to accommodate the tab selector buttons. This means that a TabPanel will not display any configured title, and will not display any configured header tools.

To display a header, embed the TabPanel in a Panel which uses layout: 'fit'.

Controlling tabs

Configuration options for the Ext.tab.Tab that represents the component can be passed in by specifying the tabConfig option:

  
    Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            renderTo: document.body,
            items: [{
            title: 'Foo'
            }, {
            title: 'Bar',
            tabConfig: {
            title: 'Custom Title',
            tooltip: 'A button tooltip'
            }
            }]
            });
            

Examples

Here is a basic TabPanel rendered to the body. This also shows the useful configuration activeTab, which allows you to set the active tab on render. If you do not set an activeTab, no tabs will be active by default.

  
    Ext.create('Ext.tab.Panel', {
            width: 300,
            height: 200,
            activeTab: 0,
            items: [
            {
            title: 'Tab 1',
            bodyPadding: 10,
            html : 'A simple tab'
            },
            {
            title: 'Tab 2',
            html : 'Another one'
            }
            ],
            renderTo : Ext.getBody()
            });
            

It is easy to control the visibility of items in the tab bar. Specify hidden: true to have the tab button hidden initially. Items can be subsequently hidden and show by accessing the tab property on the child item.

  
var tabs = Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            renderTo: document.body,
            items: [{
            title: 'Home',
            html: 'Home',
            itemId: 'home'
            }, {
            title: 'Users',
            html: 'Users',
            itemId: 'users',
            hidden: true
            }, {
            title: 'Tickets',
            html: 'Tickets',
            itemId: 'tickets'
            }]
            });
            setTimeout(function(){
            tabs.child('#home').tab.hide();
            var users = tabs.child('#users');
            users.tab.show();
            tabs.setActiveTab(users);
            }, 1000);
            

You can remove the background of the TabBar by setting the plain property to true.

  
    Ext.create('Ext.tab.Panel', {
            width: 300,
            height: 200,
            activeTab: 0,
            plain: true,
            items: [
            {
            title: 'Tab 1',
            bodyPadding: 10,
            html : 'A simple tab'
            },
            {
            title: 'Tab 2',
            html : 'Another one'
            }
            ],
            renderTo : Ext.getBody()
            });
            

Another useful configuration of TabPanel is tabPosition. This allows you to change the position where the tabs are displayed. The available options for this are 'top' (default) and 'bottom'.

  
    Ext.create('Ext.tab.Panel', {
            width: 300,
            height: 200,
            activeTab: 0,
            bodyPadding: 10,
            tabPosition: 'bottom',
            items: [
            {
            title: 'Tab 1',
            html : 'A simple tab'
            },
            {
            title: 'Tab 2',
            html : 'Another one'
            }
            ],
            renderTo : Ext.getBody()
            });
            

The setActiveTab is a very useful method in TabPanel which will allow you to change the current active tab. You can either give it an index or an instance of a tab. For example:

  
var tabs = Ext.create('Ext.tab.Panel', {
            items: [
            {
            id   : 'my-tab',
            title: 'Tab 1',
            html : 'A simple tab'
            },
            {
            title: 'Tab 2',
            html : 'Another one'
            }
            ],
            renderTo : Ext.getBody()
            });
            var tab = Ext.getCmp('my-tab');
            Ext.create('Ext.button.Button', {
            renderTo: Ext.getBody(),
            text    : 'Select the first tab',
            scope   : this,
            handler : function() {
            tabs.setActiveTab(tab);
            }
            });
            Ext.create('Ext.button.Button', {
            text    : 'Select the second tab',
            scope   : this,
            handler : function() {
            tabs.setActiveTab(1);
            },
            renderTo : Ext.getBody()
            });
            

The getActiveTab is a another useful method in TabPanel which will return the current active tab.

  
var tabs = Ext.create('Ext.tab.Panel', {
            items: [
            {
            title: 'Tab 1',
            html : 'A simple tab'
            },
            {
            title: 'Tab 2',
            html : 'Another one'
            }
            ],
            renderTo : Ext.getBody()
            });
            Ext.create('Ext.button.Button', {
            text    : 'Get active tab',
            scope   : this,
            handler : function() {
            var tab = tabs.getActiveTab();
            alert('Current tab: ' + tab.title);
            },
            renderTo : Ext.getBody()
            });
            

Adding a new tab is very simple with a TabPanel. You simple call the add method with an config object for a panel.

  
var tabs = Ext.create('Ext.tab.Panel', {
            items: [
            {
            title: 'Tab 1',
            html : 'A simple tab'
            },
            {
            title: 'Tab 2',
            html : 'Another one'
            }
            ],
            renderTo : Ext.getBody()
            });
            Ext.create('Ext.button.Button', {
            text    : 'New tab',
            scope   : this,
            handler : function() {
            var tab = tabs.add({
            // we use the tabs.items property to get the length of current items/tabs
            title: 'Tab ' + (tabs.items.length + 1),
            html : 'Another one'
            });
            tabs.setActiveTab(tab);
            },
            renderTo : Ext.getBody()
            });
            

Additionally, removing a tab is very also simple with a TabPanel. You simple call the remove method with an config object for a panel.

  
var tabs = Ext.create('Ext.tab.Panel', {
            items: [
            {
            title: 'Tab 1',
            html : 'A simple tab'
            },
            {
            id   : 'remove-this-tab',
            title: 'Tab 2',
            html : 'Another one'
            }
            ],
            renderTo : Ext.getBody()
            });
            Ext.create('Ext.button.Button', {
            text    : 'Remove tab',
            scope   : this,
            handler : function() {
            var tab = Ext.getCmp('remove-this-tab');
            tabs.remove(tab);
            },
            renderTo : Ext.getBody()
            });
            

Namespace: Ext.tab

Constructors

Fields

Name Description
activeTab The tab to activate initially. Either an ID, index or the tab component itself.
deferredRender True by default to defer the rendering of child items to the browsers DOM until a tab is activated. False will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance. The deferredRender property is internally passed to the layout manager for TabPanels (Ext.layout.container.Card) as its Ext.layout.container.Card.deferredRender configuration value. Note: leaving deferredRender as true means that the content within an unactivated tab will not be available Defaults to: true
itemCls The class added to each child item of this TabPanel. Defaults to: "x-tabpanel-child"
maxTabWidth The maximum width for each tab.
minTabWidth The minimum width for a tab in the tabBar.
plain True to not show the full background on the TabBar. Defaults to: false
removePanelHeader True to instruct each Panel added to the TabContainer to not render its header element. This is to ensure that the title of the panel does not appear twice. Defaults to: true
tabPosition The position where the tab strip should be rendered. Can be top or bottom. Defaults to: "top"

Methods

Name Description
getActiveTab() Returns the item that is currently active inside this TabPanel.
getTabBar() Returns the Ext.tab.Bar currently used in this TabPanel
setActiveTab(object) Makes the given card active. Makes it the visible card in the TabPanel's CardLayout and highlights the Tab.

Properties

Name Description
tabBar Internal reference to the docked TabBar
© Copyright 2005-2011 SharpKit. All rights reserved.