Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container
        Panel
          TabPanel

Class Ext.TabPanel

Package:Ext
Defined In:TabPanel.js
Class:TabPanel
Extends:Panel

A basic tab container. TabPanels can be used exactly like a standard Ext.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 header/footer elements

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'.

Tab Events

There is no actual tab class — each tab is simply a Component such as a Panel. However, when rendered in a TabPanel, each child Component can fire additional events that only exist for tabs and are not available from other Components. These events are:

  • activate : Fires when this Component becomes the active tab.
  • deactivate : Fires when the Component that was the active tab becomes deactivated.
  • beforeclose : Fires when the user clicks on the close tool of a closeable tab. May be vetoed by returning false from a handler.
  • close : Fires a closeable tab has been closed by the user.

Creating TabPanels from Code

TabPanels 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'
    }]
});

Creating TabPanels from Existing Markup

TabPanels can also be rendered from pre-existing markup in a couple of ways.

  • Pre-Structured Markup
  • A container div with one or more nested tab divs with class 'x-tab' can be rendered entirely from existing markup (See the autoTabs example).

  • Un-Structured Markup
  • A TabPanel can also be rendered 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. 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>
    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 = false to render all content tabs on page load.

Config Options

Config OptionsDefined By
 activeTab : String/Number
A string id or the numeric index of the tab that should be initially activated on render (defaults to undefined).
TabPanel
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 baseCls : String
The base CSS class applied to the panel (defaults to 'x-tab-panel').
TabPanel
 collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
 data : Mixed
The initial set of data to apply to the tpl to update the content area of the Component.
Component
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
 minTabWidth : Number
The minimum width in pixels for each tab when resizeTabs = true (defaults to 30).
TabPanel
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 plain : Boolean
true to render the tab strip without a background container image (defaults to false).
TabPanel
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
Panel
 scrollRepeatInterval : Number
Number of milliseconds between each scroll while a tab scroll button is continuously pressed (defaults to 400).
TabPanel
 tabWidth : Number
The initial width in pixels of each new tab (defaults to 120).
TabPanel
 wheelIncrement : Number
For scrolling tabs, the number of pixels to increment on mouse wheel scrolling (defaults to 20).
TabPanel
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
 bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
 collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
 disabled : Boolean
True if this component is disabled. Read-only.
Component
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By

Public Events

EventDefined By