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.