Properties Methods Events Config Options Direct Link

Class CQ.Ext.TabPanel


A basic tab container. TabPanels can be used exactly like a standard CQ.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 CQ.Ext.TabPanel({
    renderTo: CQ.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 CQ.Ext.TabPanel({
        renderTo: 'my-tabs',
        activeTab: 0,
            {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 Options Defined By
  activeTab : String/Number
A string id or the numeric index of the tab that should be initially activated on render (defaults to undefined).
  allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
  disabled : Boolean
Render this component disabled (default is false).
  disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
  pageX : Number
The page level x coordinate for this component if contained within a positioning container.
  pageY : Number
The page level y coordinate for this component if contained within a positioning container.
  tabWidth : Number
The initial width in pixels of each new tab (defaults to 120).
  x : Number
The local x (left) coordinate for this component if contained within a positioning container.
  y : Number
The local y (top) coordinate for this component if contained within a positioning container.

Public Properties

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

Public Methods

Method Defined By

Public Events

Event Defined By