Print Friendly

Class Ext.TabPanel

Package:Ext
Class:TabPanel
Extends:Observable
Defined In:TabPanel.js
A lightweight tab container.

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 Ext.TabPanelItem bodies.
  el : Ext.Element TabPanel
The container element for this TabPanel.

Public Methods

Method Defined By
  TabPanelString/HTMLElement/Ext.Element container, Object/Boolean config ) TabPanel
Create a new TabPanel.
  activateString/Number id ) : Ext.TabPanelItem TabPanel
Activates a Ext.TabPanelItem. The currently active one will be deactivated.
  addEventsObject object ) : void Observable
Used to define events on this Observable
  addListenerString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this component
  addTabString id, String text, [String content], [Boolean closable] ) : Ext.TabPanelItem TabPanel
Creates a new Ext.TabPanelItem by looking for an existing element with the provided id -- if it's not found it create...
  addTabItemExt.TabPanelItem item ) : void TabPanel
Adds an existing Ext.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
  disableTabString/Number id ) : void TabPanel
Disables a Ext.TabPanelItem. It cannot be the active tab, if it is this call is ignored.
  enableTabString/Number id ) : void TabPanel
Enables a Ext.TabPanelItem that is disabled.
  endUpdate() : void TabPanel
Stops an update and resizes the tabs (if resizeTabs is false this does nothing)
  fireEventString eventName, Object... args ) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  getActiveTab() : Ext.TabPanelItem TabPanel
Gets the active Ext.TabPanelItem.
  getCount() : Number TabPanel
Returns the number of tabs in this TabPanel.
  getTabString/Number id ) : Ext.TabPanelItem TabPanel
Returns the Ext.TabPanelItem with the specified id/index
  hasListenerString eventName ) : Boolean Observable
Checks to see if this object has any listeners for a specified event
  hideTabString/Number id ) : void TabPanel
Hides the Ext.TabPanelItem with the specified id/index
  onString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeListenerString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener
  removeTabString/Number id ) : void TabPanel
Removes a Ext.TabPanelItem.
  setTabWidthNumber 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
  unString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener (shorthand for removeListener)
  unhideTabString/Number id ) : void TabPanel
"Unhides" the Ext.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 Ext.TabPanelItem bodies.
This property is defined by TabPanel.

el

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

Constructor Details

TabPanel

public function TabPanel( String/HTMLElement/Ext.Element container, Object/Boolean config )
Create a new TabPanel.
Parameters:
  • container : String/HTMLElement/Ext.Element
    The id, DOM element or Ext.Element container where this TabPanel is to be rendered.
  • config : Object/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 )
Activates a Ext.TabPanelItem. The currently active one will be deactivated.
Parameters:
  • id : String/Number
    The id or index of the TabPanelItem to activate.
Returns:
  • Ext.TabPanelItem
    The TabPanelItem.
This method is defined by TabPanel.

addEvents

public function addEvents( Object object )
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
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.
    • 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)

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

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

    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 which passes the same scope object to all handlers:

    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 Ext.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 )
Adds an existing Ext.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 (defaults to undefined)
Returns:
  • void
This method is defined by TabPanel.

disableTab

public function disableTab( String/Number id )
Disables a Ext.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 )
Enables a Ext.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()
Gets the active Ext.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 in this TabPanel.
Parameters:
  • None.
Returns:
  • Number
This method is defined by TabPanel.

getTab

public function getTab( String/Number id )
Returns the Ext.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 has any listeners 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 Ext.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 scope], [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
  • scope : Object
    (optional) The scope in which to execute the handler function. The handler function's "this" context.
  • 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 )
Removes a Ext.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 Ext.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.