Super classes

Ext.AbstractPanel Ext.panel.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's layout

TabPanels use a DockLayout 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'.

Creating TabPanels

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

Config Options

animCollapse : Boolean

true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext....

true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.Fx class is available, otherwise false). May also be specified as the animation duration in milliseconds.

baseCls : String

The base CSS class to apply to this panel's element (defaults to 'x-panel').

bodyBorder : Number/Boolean

A shortcut for setting a border style on the body element. The value can either be a number to be applied to all side...

A shortcut for setting a border style on the body element. The value can either be a number to be applied to all sides, or a normal css string describing borders. Defaults to undefined.

bodyMargin : Number/Boolean

A shortcut for setting a margin style on the body element. The value can either be a number to be applied to all side...

A shortcut for setting a margin style on the body element. The value can either be a number to be applied to all sides, or a normal css string describing margins. Defaults to undefined.

bodyPadding : Number/Boolean

A shortcut for setting a padding style on the body element. The value can either be a number to be applied to all sid...

A shortcut for setting a padding style on the body element. The value can either be a number to be applied to all sides, or a normal css string describing padding. Defaults to undefined.

closable : Boolean

True to display the 'close' tool button and allow the user to close the window, false to hide the button and disallow...

True to display the 'close' tool button and allow the user to close the window, false to hide the button and disallow closing the window (defaults to false).

By default, when close is requested by clicking the close button in the header, the close method will be called. This will destroy the Panel and its content meaning that it may not be reused.

To make closing a Panel hide the Panel so that it may be reused, set closeAction to 'hide'.

closeAction : String

The action to take when the close header tool is clicked: <div class="mdetail-params"> 'close' : Default<div class="s...

The action to take when the close header tool is clicked:

'close' : Default
remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.
'hide' :
hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.

Note: This behavior has changed! setting *does* affect the close method which will invoke the approriate closeAction.

collapseDirection : Boolean

The direction to collapse the Panel when the toggle button is clicked. Defaults to the headerPosition Important: This...

The direction to collapse the Panel when the toggle button is clicked.

Defaults to the headerPosition

Important: This config is ignored for collapsible Panels which are direct child items of a border layout.

Specify as 'top', 'bottom', 'left' or 'right'.

collapseFirst : Boolean

true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the pane...

true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the panel's title bar, false to render it last (defaults to true).

collapseMode : String

Important: this config is only effective for collapsible Panels which are direct child items of a border layout. When...

Important: this config is only effective for collapsible Panels which are direct child items of a border layout.

When not a direct child item of a border layout, then the Panel's header remains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header (orientated correctly depending on the collapseDirection) will be inserted to show a the title and a re-expand tool.

When a child item of a border layout, this config has two options:

alt : Default.
When collapsed, a placeholder Container is injected into the layout to represent the Panel and to provide a UI with a Tool to allow the user to re-expand the Panel.
header :
The Panel collapses to leave a header visible as when not inside a border layout.

collapsed : Boolean

true to render the panel collapsed, false to render it expanded (defaults to false).

collapsedCls : String

A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').

collapsible : Boolean

True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button area. Fa...

True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool (defaults to false).

See collapseMode and collapseDirection

dockedItems : Object/Array

A component or series of components to be added as docked items to this panel. The docked items can be docked to eith...

A component or series of components to be added as docked items to this panel. The docked items can be docked to either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:

var panel = new Ext.Panel({
    fullscreen: true,
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            text: 'Docked to the bottom'
        }]
    }]
});

floatable : Boolean

Important: This config is only effective for collapsible Panels which are direct child items of a border layout. true...

Important: This config is only effective for collapsible Panels which are direct child items of a border layout.

true to allow clicking a collapsed Panel's placeHolder to display the Panel floated above the layout, false to force the user to fully expand a collapsed region by clicking the expand button to see it again (defaults to true).

frame : Boolean

True to apply a frame to the panel.

headerPosition : String

Specify as 'top', 'bottom', 'left' or 'right'. Defaults to 'top'.

hideCollapseTool : Boolean

true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).

itemCls : String

The class added to each child item of this TabPanel. Defaults to 'x-tabpanel-child'.

layout : Object

Optional configuration object for the internal card layout. If present, this is passed straight through to the layout...

Optional configuration object for the internal card layout. If present, this is passed straight through to the layout's constructor

minButtonWidth : Number

Minimum width of all form buttons in pixels (defaults to 75). If set, this will be used as the default value for the ...

Minimum width of all form buttons in pixels (defaults to 75). If set, this will be used as the default value for the Ext.form.Button.minWidth config of each Button added to the footer toolbar. Will be ignored for buttons that have this value configured some other way, e.g. in their own config object or via the defaults config of their parent container.

minTabWidth : Number

The minimum width for a tab in the tabBar. Defaults to 30.

placeHolder : Mixed

Important: This config is only effective for collapsible Panels which are direct child items of a border layout when ...

Important: This config is only effective for collapsible Panels which are direct child items of a border layout when using the default 'alt' collapseMode.

b>Optional. A Component (or config object for a Component) to show in place of this Panel when this Panel is collapsed by a border layout. Defaults to a generated Header containing a Tool to re-expand the Panel.

plain : Boolean

True to not show the full background on the TabBar

preventHeader : Boolean

Prevent a Header from being created and shown. Defaults to false.

removePanelHeader : Boolean

True to instruct each Panel added to the TabContainer to not render its header element. This is to ensure that the t...

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.

tabBar : Object

Optional configuration object for the internal Ext.TabBar. If present, this is passed straight through to the TabBar...

Optional configuration object for the internal Ext.TabBar. If present, this is passed straight through to the TabBar's constructor

titleCollapse : Boolean

true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, fa...

true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false) to allow it only by clicking to tool button (defaults to false)).

Properties

dd : Ext.dd.DragSource.

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles drag...

If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.

The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.

tabBar : Ext.TabBar Internal reference to the docked TabBar

Methods

addDocked( Object/Array component., [Number pos] ) : Void

Adds docked item(s) to the panel.

Parameters

component. : Object/Array
The Component or array of components to add. The components must include a 'dock' parameter on each component to indicate where it should be docked ('top', 'right', 'bottom', 'left').
pos : Number
(optional) The index at which the Component will be added

Returns

Void

close : Void

Closes the Panel. By default, this method, removes it from the DOM, destroys the Panel object and all its descendant ...

Closes the Panel. By default, this method, removes it from the DOM, destroys the Panel object and all its descendant Components. The beforeclose event is fired before the close happens and will cancel the close action if it returns false.

Note: This method is not affected by the closeAction setting which only affects the action triggered when clicking the 'close' tool in the header. To hide the Panel without destroying it, call hide.

collapse( Number direction., Boolean animate ) : Ext.panel.Panel

Collapses the panel body so that the body becomes hidden. Docked Components parallel to the border towards which the ...

Collapses the panel body so that the body becomes hidden. Docked Components parallel to the border towards which the collapse takes place will remain visible. Fires the beforecollapse event which will cancel the collapse action if it returns false.

Parameters

direction. : Number
The direction to collapse towards. Must be one of
- Ext.Component.DIRECTION_TOP
- Ext.Component.DIRECTION_RIGHT
- Ext.Component.DIRECTION_BOTTOM
- Ext.Component.DIRECTION_LEFT
animate : Boolean
True to animate the transition, else false (defaults to the value of the animCollapse panel config)

Returns

Ext.panel.Panel this

expand( Boolean animate ) : Ext.panel.Panel

Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action ...

Expands the panel body so that it becomes visible. Fires the beforeexpand event which will cancel the expand action if it returns false.

Parameters

animate : Boolean
True to animate the transition, else false (defaults to the value of the animCollapse panel config)

Returns

Ext.panel.Panel this

getActiveTab : Ext.Component/Integer

Returns the item that is currently active inside this TabPanel. Note that before the TabPanel first activates a child...

Returns the item that is currently active inside this TabPanel. Note that before the TabPanel first activates a child component this will return whatever was configured in the activeTab config option

getComponent( String/Number comp ) : Ext.Component

Attempts a default component lookup (see Ext.container.Container.getComponent). If the component is not found in the ...

Attempts a default component lookup (see Ext.container.Container.getComponent). If the component is not found in the normal items, the dockedItems are searched and the matched component (if any) returned (see {@loink #getDockedComponent}). Note that docked items will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched.

Parameters

comp : String/Number
The component id, itemId or position to find

Returns

Ext.Component The component (if found)

getDockedComponent( String/Number comp ) : Ext.Component

Finds a docked component by id, itemId or position

Parameters

comp : String/Number
The id, itemId or position of the docked component (see getComponent for details)

Returns

Ext.Component The docked component (if found)

getDockedItems : Array

Retrieve an array of all currently docked components.

getTabBar : Ext.TabBar

Returns the Ext.TabBar currently used in this TabPanel

initTools : Void

insertDocked( Number pos, Object/Array component. ) : Void

Inserts docked item(s) to the panel at the indicated position.

Parameters

pos : Number
The index at which the Component will be inserted
component. : Object/Array
The Component or array of components to add. The components must include a 'dock' paramater on each component to indicate where it should be docked ('top', 'right', 'bottom', 'left').

Returns

Void

removeDocked( Ext.Component item., [Boolean autoDestroy] ) : Void

Removes the docked item from the panel.

Parameters

item. : Ext.Component
The Component to remove.
autoDestroy : Boolean
(optional) Destroy the component after removal.

Returns

Void

setActiveTab( Ext.Component card ) : Void

Makes the given card active (makes it the visible card in the TabPanel's CardLayout and highlights the Tab)

Parameters

card : Ext.Component
The card to make active

Returns

Void

setIconClass( cls undefined ) : Void

Set the iconCls for the panel's header. See Ext.panel.Header.iconCls.

Parameters

undefined : cls

Returns

Void

setTitle( String title ) : Void

Set a title for the panel's header. See Ext.panel.Header.title.

Parameters

title : String

Returns

Void

toggleCollapse : Ext.panel.Panel

Shortcut for performing an expand or collapse based on the current state of the panel.

Events

beforetabchange( Ext.tab.TabPanel tabPanel, Ext.Component newCard, Ext.Component oldCard )

Fires before a tab change (activated by setActiveTab). Return false in any listener to cancel the tabchange

Parameters

tabPanel : Ext.tab.TabPanel
The TabPanel
newCard : Ext.Component
The card that is about to be activated
oldCard : Ext.Component
The card that is currently active

Returns

Void

bodyresize( Ext.Panel p, Number width, Number height )

Fires after the Panel has been resized.

Parameters

p : Ext.Panel
the Panel which has been resized.
width : Number
The Panel body's new width.
height : Number
The Panel body's new height.

Returns

Void

tabchange( Ext.tab.TabPanel tabPanel, Ext.Component newCard, Ext.Component oldCard )

Fires when a new tab has been activated (activated by setActiveTab).

Parameters

tabPanel : Ext.tab.TabPanel
The TabPanel
newCard : Ext.Component
The newly activated item
oldCard : Ext.Component
The previously active item

Returns

Void

Sencha Documentation

Ext.tab.TabPanel

Super classes

Config Options

Properties

Methods

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Parameters

Returns

Events

Parameters

Returns

Parameters

Returns

Parameters

Returns