Package: | Ext |
Class: | TabPanel |
Extends: | Observable |
Defined In: | TabPanel.js |
"#008000">// 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");
"#008000">// more advanced tabs, built from javascript
var jtabs = new Ext.TabPanel("jtabs");
jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
"#008000">// 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);
"#008000">// Use setUrl for Ajax loading
var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
tab3.setUrl("ajax2.htm", null, true);
"#008000">// Disabled tab
var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
tab4.disable();
jtabs.activate("jtabs-1");
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. |
Method | Defined By | |
---|---|---|
TabPanel( String/HTMLElement/Ext.Element container , Object/Boolean config ) |
TabPanel | |
Create a new TabPanel. | ||
activate( String/Number id ) : Ext.TabPanelItem |
TabPanel | |
Activates a Ext.TabPanelItem. The currently active one will be deactivated. | ||
addEvents( Object object ) : void |
Observable | |
Used to define events on this Observable | ||
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 Ext.TabPanelItem by looking for an existing element with the provided id -- if it's not found it create... | ||
addTabItem( Ext.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 | ||
disableTab( String/Number id ) : void |
TabPanel | |
Disables a Ext.TabPanelItem. It cannot be the active tab, if it is this call is ignored. | ||
enableTab( String/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) | ||
fireEvent( String 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. | ||
getTab( String/Number id ) : Ext.TabPanelItem |
TabPanel | |
Returns the Ext.TabPanelItem with the specified id/index | ||
hasListener( String eventName ) : Boolean |
Observable | |
Checks to see if this object has any listeners for a specified event | ||
hideTab( String/Number id ) : void |
TabPanel | |
Hides the Ext.TabPanelItem with the specified id/index | ||
on( String 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 | ||
removeListener( String eventName , Function handler , [Object scope ] ) : void |
Observable | |
Removes a listener | ||
removeTab( String/Number id ) : void |
TabPanel | |
Removes a Ext.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 Ext.TabPanelItem with the specified id/index. |
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 |
public Ext.Element bodyEl
public Ext.Element el
public function TabPanel( String/HTMLElement/Ext.Element container
, Object/Boolean config
)
container
: String/HTMLElement/Ext.Elementconfig
: Object/Booleanpublic function activate( String/Number id
)
id
: String/NumberExt.TabPanelItem
public function addEvents( Object object
)
object
: Objectvoid
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Object
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
});
void
public function addTab( String id
, String text
, [String content
], [Boolean closable
] )
id
: Stringtext
: Stringcontent
: Stringclosable
: BooleanExt.TabPanelItem
public function addTabItem( Ext.TabPanelItem item
)
item
: Ext.TabPanelItemvoid
public function autoSizeTabs()
void
public function beginUpdate()
void
public function destroy( [Boolean removeEl
] )
removeEl
: Booleanvoid
public function disableTab( String/Number id
)
id
: String/Numbervoid
public function enableTab( String/Number id
)
id
: String/Numbervoid
public function endUpdate()
void
public function fireEvent( String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function getActiveTab()
Ext.TabPanelItem
public function getCount()
Number
public function getTab( String/Number id
)
id
: String/NumberExt.TabPanelItem
public function hasListener( String eventName
)
eventName
: StringBoolean
public function hideTab( String/Number id
)
id
: String/Numbervoid
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Objectvoid
public function purgeListeners()
void
public function removeListener( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public function removeTab( String/Number id
)
id
: String/Numbervoid
public function setTabWidth( Number The
)
The
: Numbervoid
public function syncHeight( [Number targetHeight
] )
targetHeight
: Numbervoid
public function un( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public function unhideTab( String/Number id
)
id
: String/Numbervoid
public event beforetabchange
this
: Ext.TabPanele
: Objecttab
: Ext.TabPanelItempublic event tabchange
this
: Ext.TabPanelactivePanel
: Ext.TabPanelItem