Print Friendly

# Class Ext.TabPanel

Package: | Ext
Class: | TabPanel
Extends: | Observable
Defined In: | TabPanel.js

Creates a lightweight TabPanel component using Yahoo! UI.
Usage:

    // basic tabs 1, built from existing content
        var tabs = new Ext.TabPanel("tabs1");
        tabs.addTab("script", "View Script");
        tabs.addTab("markup", "View Markup");
        tabs.activate("script");

        // more advanced tabs, built from javascript
        var jtabs = new Ext.TabPanel("jtabs");
        jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");

        // set up the UpdateManager
        var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
        var updater = tab2.getUpdateManager();
        updater.setDefaultUrl("ajax1.htm");
        tab2.on('activate', updater.refresh, updater, true);

        // Use setUrl for Ajax loading
        var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
        tab3.setUrl("ajax2.htm", null, true);

        // Disabled tab
        var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can"t see me cause I"m disabled");
        tab4.disable();

        jtabs.activate("jtabs-1");
    }

Properties - Methods - Events

## Public Properties

Property | Defined By
--- | ---
| bodyEl : Ext.Element | TabPanel
The body element that contains TabPaneItem bodies.
| el : Ext.Element | TabPanel
The container element for this TabPanel.
| maxTabWidth : Number | TabPanel
The maximum width of a tab (ignored if resizeTabs is not true).
| minTabWidth : Number | TabPanel
The minimum width of a tab (ignored if resizeTabs is not true).
| monitorResize : Boolean | TabPanel
Set this to true to turn on window resizing monitoring (ignored if resizeTabs is not true).
| preferredTabWidth : Number | TabPanel
The preferred (default) width of a tab (ignored if resizeTabs is not true).
| resizeTabs : Boolean | TabPanel
Set this to true to enable dynamic tab resizing.
| tabPosition : String | TabPanel
The position of the tabs. Can be "top" or "bottom"

## Public Methods

Method | Defined By
--- | ---
| TabPanel(`String/HTMLElement/Element container`, `Boolean config`) | TabPanel
Create new TabPanel.
| activate(`String/Number id`) : void | TabPanel
Activate a TabPanelItem. The currently active will be deactivated.
| addEvents(`Object object`) : void | Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void | Observable
Appends an event handler to this component
| addTab(`String id`, `String text`, [`String content`], [`Boolean closable`]) : Ext.TabPanelItem | TabPanel
Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one.
| addTabItem(`Ext.TabPanelItem item`) : void | TabPanel
Add an existing TabPanelItem.
| autoSizeTabs() : void | TabPanel
Manual call to resize the tabs (if resizeTabs is false this does nothing)
| beginUpdate() : void | TabPanel
Disables tab resizing while tabs are being added (if resizeTabs is false this does nothing)
| destroy([`Boolean removeEl`]) : void | TabPanel
Destroys this TabPanel
| disableTab(`String/Number id`) : void | TabPanel
Disable a TabPanelItem. It cannot be the active tab, if it is this call is ignored..
| enableTab(`String/Number id`) : void | TabPanel
Enable a TabPanelItem that is disabled.
| endUpdate() : void | TabPanel
Stops an update and resizes the tabs (if resizeTabs is false this does nothing)
| fireEvent(`String eventName`, `Object... args`) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getActiveTab() : Ext.TabPanelItem | TabPanel
Get the active TabPanelItem
| getCount() : Number | TabPanel
Returns the number of tabs
| getTab(`String/Number id`) : Ext.TabPanelItem | TabPanel
Returns the TabPanelItem with the specified id/index
| hasListener(`String eventName`) : Boolean | Observable
Checks to see if this object is currently listening for a specified event
| hideTab(`String/Number id`) : void | TabPanel
Hides the TabPanelItem with the specified id/index
| on(`String eventName`, `Function handler`, [`Object options`]) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| purgeListeners() : void | Observable
Removes all listeners for this object
| removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener
| removeTab(`String/Number id`) : void | TabPanel
Remove a TabPanelItem.
| setTabWidth(`Number The`) : void | TabPanel
Resizes all the tabs to the passed width
| syncHeight([`Number targetHeight`]) : void | TabPanel
Updates the tab body element to fit the height of the container element for overflow scrolling
| un(`String eventName`, `Function handler`, [`Object scope`]) : void | Observable
Removes a listener (shorthand for removeListener)
| unhideTab(`String/Number id`) : void | TabPanel
"Unhides" the TabPanelItem with the specified id/index

## Public Events

Event | Defined By
--- | ---
| beforetabchange : (`Ext.TabPanel this`, `Object e`, `Ext.TabPanelItem tab`) | TabPanel
Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
| tabchange : (`Ext.TabPanel this`, `Ext.TabPanelItem activePanel`) | TabPanel
Fires when the active tab changes

## Property Details

### bodyEl

`public Ext.Element bodyEl`
The body element that contains TabPaneItem bodies.
This property is defined by TabPanel.

### el

`public Ext.Element el`
The container element for this TabPanel.
This property is defined by TabPanel.

### maxTabWidth

`public Number maxTabWidth`
The maximum width of a tab (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### minTabWidth

`public Number minTabWidth`
The minimum width of a tab (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### monitorResize

`public Boolean monitorResize`
Set this to true to turn on window resizing monitoring (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### preferredTabWidth

`public Number preferredTabWidth`
The preferred (default) width of a tab (ignored if resizeTabs is not true).
This property is defined by TabPanel.

### resizeTabs

`public Boolean resizeTabs`
Set this to true to enable dynamic tab resizing.
This property is defined by TabPanel.

### tabPosition

`public String tabPosition`
The position of the tabs. Can be "top" or "bottom"
This property is defined by TabPanel.

## Constructor Details

### TabPanel

`public function TabPanel(`String/HTMLElement/Element container`, `Boolean config`)`
Create new TabPanel.
Parameters:

- `container` : String/HTMLElement/Element
  The id, DOM element or Ext.Element container where this TabPanel is to be rendered.
- `config` : Boolean
  Config object to set any properties for this TabPanel or true to render the tabs on the bottom.

## Method Details

### activate

`public function activate(`String/Number id`)`
Activate a TabPanelItem. The currently active will be deactivated.
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to activate.

Returns:

- `void`

This method is defined by TabPanel.

### addEvents

`public function addEvents(`Object object`)`
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:

- `object` : Object
  The object from which to copy events

Returns:

- `void`

This method is defined by Observable.

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`])`
Appends an event handler to this component
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope in which to execute the handler function. The handler function's "this" context.
- `options` : Object
  (optional) An object containing handler configuration properties. This may contain any of the following properties:
  - scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
  - delegate {String} A simple selector to filter the target or look for a descendant of the target
  - stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
  - preventDefault {Boolean} True to prevent the default action
  - stopPropagation {Boolean} True to prevent event propagation
  - normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
  - delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
  - single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
  - buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

  Combining Options
  Using the options argument, it is possible to combine different types of listeners:
  A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)

  Code:

      el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

  The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

  Attaching multiple handlers in 1 call
  Code:

      el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });

  Or a shorthand syntax:
  Code:

      el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });

Returns:

- `void`

This method is defined by Observable.

### addTab

`public function addTab(`String id`, `String text`, [`String content`], [`Boolean closable`])`
Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one.
Parameters:

- `id` : String
  The id of the div to use or create
- `text` : String
  The text for the tab
- `content` : String
  (optional) Content to put in the TabPanelItem body
- `closable` : Boolean
  (optional) True to create a close icon on the tab

Returns:

- `Ext.TabPanelItem`
  The created TabPanelItem

This method is defined by TabPanel.

### addTabItem

`public function addTabItem(`Ext.TabPanelItem item`)`
Add an existing TabPanelItem.
Parameters:

- `item` : Ext.TabPanelItem
  The TabPanelItem to add

Returns:

- `void`

This method is defined by TabPanel.

### autoSizeTabs

`public function autoSizeTabs()`
Manual call to resize the tabs (if resizeTabs is false this does nothing)
Parameters:

- None.

Returns:

- `void`

This method is defined by TabPanel.

### beginUpdate

`public function beginUpdate()`
Disables tab resizing while tabs are being added (if resizeTabs is false this does nothing)
Parameters:

- None.

Returns:

- `void`

This method is defined by TabPanel.

### destroy

`public function destroy([`Boolean removeEl`])`
Destroys this TabPanel
Parameters:

- `removeEl` : Boolean
  (optional) True to remove the element from the DOM as well

Returns:

- `void`

This method is defined by TabPanel.

### disableTab

`public function disableTab(`String/Number id`)`
Disable a TabPanelItem. It cannot be the active tab, if it is this call is ignored..
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to disable.

Returns:

- `void`

This method is defined by TabPanel.

### enableTab

`public function enableTab(`String/Number id`)`
Enable a TabPanelItem that is disabled.
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to enable.

Returns:

- `void`

This method is defined by TabPanel.

### endUpdate

`public function endUpdate()`
Stops an update and resizes the tabs (if resizeTabs is false this does nothing)
Parameters:

- None.

Returns:

- `void`

This method is defined by TabPanel.

### fireEvent

`public function fireEvent(`String eventName`, `Object... args`)`
Fires the specified event with the passed parameters (minus the event name).
Parameters:

- `eventName` : String
- `args` : Object...
  Variable number of parameters are passed to handlers

Returns:

- `Boolean`
  returns false if any of the handlers return false otherwise it returns true

This method is defined by Observable.

### getActiveTab

`public function getActiveTab()`
Get the active TabPanelItem
Parameters:

- None.

Returns:

- `Ext.TabPanelItem`
  The active TabPanelItem or null if none are active.

This method is defined by TabPanel.

### getCount

`public function getCount()`
Returns the number of tabs
Parameters:

- None.

Returns:

- `Number`

This method is defined by TabPanel.

### getTab

`public function getTab(`String/Number id`)`
Returns the TabPanelItem with the specified id/index
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to fetch.

Returns:

- `Ext.TabPanelItem`

This method is defined by TabPanel.

### hasListener

`public function hasListener(`String eventName`)`
Checks to see if this object is currently listening for a specified event
Parameters:

- `eventName` : String
  The name of the event to check for

Returns:

- `Boolean`
  True if the event is being listened for, else false

This method is defined by Observable.

### hideTab

`public function hideTab(`String/Number id`)`
Hides the TabPanelItem with the specified id/index
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to hide.

Returns:

- `void`

This method is defined by TabPanel.

### on

`public function on(`String eventName`, `Function handler`, [`Object options`])`
Appends an event handler to this element (shorthand for addListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `options` : Object
  (optional)

Returns:

- `void`

This method is defined by Observable.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### removeListener

`public function removeListener(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### removeTab

`public function removeTab(`String/Number id`)`
Remove a TabPanelItem.
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to remove.

Returns:

- `void`

This method is defined by TabPanel.

### setTabWidth

`public function setTabWidth(`Number The`)`
Resizes all the tabs to the passed width
Parameters:

- `The` : Number
  new width

Returns:

- `void`

This method is defined by TabPanel.

### syncHeight

`public function syncHeight([`Number targetHeight`])`
Updates the tab body element to fit the height of the container element for overflow scrolling
Parameters:

- `targetHeight` : Number
  (optional) Override the starting height from the elements height

Returns:

- `void`

This method is defined by TabPanel.

### un

`public function un(`String eventName`, `Function handler`, [`Object scope`])`
Removes a listener (shorthand for removeListener)
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The handler to remove
- `scope` : Object
  (optional) The scope (this object) for the handler

Returns:

- `void`

This method is defined by Observable.

### unhideTab

`public function unhideTab(`String/Number id`)`
"Unhides" the TabPanelItem with the specified id/index
Parameters:

- `id` : String/Number
  The id or index of the TabPanelItem to unhide.

Returns:

- `void`

This method is defined by TabPanel.

## Event Details

### beforetabchange

`public event beforetabchange`
Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
Subscribers will be called with the following parameters:

- `this` : Ext.TabPanel
- `e` : Object
  Set cancel to true on this object to cancel the tab change
- `tab` : Ext.TabPanelItem
  The tab being changed to

This event is defined by TabPanel.

### tabchange

`public event tabchange`
Fires when the active tab changes
Subscribers will be called with the following parameters:

- `this` : Ext.TabPanel
- `activePanel` : Ext.TabPanelItem
  The new active tab

This event is defined by TabPanel.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.