Class Ext.TabPanel

A basic tab container. Tab panels can be used exactly like a standard Ext.Panel for layout purposes, but also have special support for containing child Panels that get automatically converted into tabs.

There is no actual tab class — each tab is simply an Ext.Panel. However, when rendered in a TabPanel, each child Panel can fire additional events that only exist for tabs and are not available to other Panels. These are:

• activate: Fires when this Panel becomes the active tab.
  Listeners will be called with the following arguments:

  • tab : Panel
    The tab that was activated
• deactivate: Fires when this Panel that was the active tab becomes deactivated.
  Listeners will be called with the following arguments:

  • tab : Panel
    The tab that was deactivated

There are several methods available for creating TabPanels. The output of the following examples should be exactly the same. The tabs can be created and rendered completely in code, as in this example:

var tabs = new Ext.TabPanel({
    renderTo: Ext.getBody(),
    activeTab: 0,
    items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
});

TabPanels can also be rendered from markup in a couple of ways. See the autoTabs example for rendering entirely from markup that is already structured correctly as a TabPanel (a container div with one or more nested tab divs with class 'x-tab'). You can also render from markup that is not strictly structured by simply specifying by id which elements should be the container and the tabs. Using this method, tab content can be pulled from different elements within the page by id regardless of page structure. Note that the tab divs in this example contain the class 'x-hide-display' so that they can be rendered deferred without displaying outside the tabs. You could alternately set deferredRender to false to render all content tabs on page load. For example:

var tabs = new Ext.TabPanel({
    renderTo: 'my-tabs',
    activeTab: 0,
    items:[
        {contentEl:'tab1', title:'Tab 1'},
        {contentEl:'tab2', title:'Tab 2'}
    ]
});

// Note that the tabs do not have to be nested within the container (although they can be)
<div id="my-tabs"></div>
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>