Creates a lightweight TabPanel component using Yahoo! UI.
Usage:
"#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");
|
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. |
activate
public function activate( String/Number id
)
Activates a
Ext.TabPanelItem. The currently active one will be deactivated.
Parameters:
Returns:
Ext.TabPanelItem
The TabPanelItem.
This method is defined by TabPanel.
addEvents
public function addEvents( Object object
)
Used to define events on this Observable
addListener
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
Appends an event handler to this component
Parameters:
eventName
: StringThe type of event to listen for
handler
: FunctionThe 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:
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
: StringThe id of the div to use or create
text
: StringThe 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.TabPanelItemThe TabPanelItem to add
Returns:
This method is defined by TabPanel.
autoSizeTabs
public function autoSizeTabs()
Manual call to resize the tabs (if
resizeTabs is false this does nothing)
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)
This method is defined by TabPanel.
destroy
public function destroy( [Boolean removeEl
] )
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.
This method is defined by TabPanel.
enableTab
public function enableTab( String/Number id
)
This method is defined by TabPanel.
endUpdate
public function endUpdate()
Stops an update and resizes the tabs (if
resizeTabs is false this does nothing)
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).
getActiveTab
public function getActiveTab()
This method is defined by TabPanel.
getCount
public function getCount()
Returns the number of tabs in this TabPanel.
This method is defined by TabPanel.
getTab
public function getTab( String/Number id
)
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
hideTab
public function hideTab( String/Number id
)
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
: StringThe type of event to listen for
handler
: FunctionThe 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:
purgeListeners
public function purgeListeners()
Removes all listeners for this object
removeListener
public function removeListener( String eventName
, Function handler
, [Object scope
] )
removeTab
public function removeTab( String/Number id
)
This method is defined by TabPanel.
setTabWidth
public function setTabWidth( Number The
)
Resizes all the tabs to the passed width
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
This method is defined by TabPanel.
un
public function un( String eventName
, Function handler
, [Object scope
] )
Removes a listener (shorthand for removeListener)
unhideTab
public function unhideTab( String/Number id
)
This method is defined by TabPanel.