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");
}

属性 - 方法 - 事件

公共属性

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

公共方法

方法		定义对象
	TabPanel(`String/HTMLElement/Element container`, `Boolean config`)	TabPanel
	Create new TabPanel.	TabPanel
	activate(`String/Number id`) : void	TabPanel
	Activate a TabPanelItem. The currently active will be deactivated.	TabPanel
	addEvents(`Object object`) : void	Observable
	将对象中没有的事件从给出的对象中复制过来。	Observable
	addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void	Observable
	为该组件加入事件处理器函数	Observable
	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.	TabPanel
	addTabItem(`Ext.TabPanelItem item`) : void	TabPanel
	Add an existing TabPanelItem.	TabPanel
	autoSizeTabs() : void	TabPanel
	Manual call to resize the tabs (if resizeTabs is false this does nothing)	TabPanel
	beginUpdate() : void	TabPanel
	Disables tab resizing while tabs are being added (if resizeTabs is false this does nothing)	TabPanel
	destroy([`Boolean removeEl`]) : void	TabPanel
	Destroys this TabPanel	TabPanel
	disableTab(`String/Number id`) : void	TabPanel
	Disable a TabPanelItem. It cannot be the active tab, if it is this call is ignored..	TabPanel
	enableTab(`String/Number id`) : void	TabPanel
	Enable a TabPanelItem that is disabled.	TabPanel
	endUpdate() : void	TabPanel
	Stops an update and resizes the tabs (if resizeTabs is false this does nothing)	TabPanel
	fireEvent(`String eventName`, `Object... args`) : Boolean	Observable
	触发指定的事件, 并将参数传入（至少要有事件名称）。	Observable
	getActiveTab() : Ext.TabPanelItem	TabPanel
	Get the active TabPanelItem	TabPanel
	getCount() : Number	TabPanel
	Returns the number of tabs	TabPanel
	getTab(`String/Number id`) : Ext.TabPanelItem	TabPanel
	Returns the TabPanelItem with the specified id/index	TabPanel
	hasListener(`String eventName`) : Boolean	Observable
	检查该对象是否拥有指定事件的侦听器	Observable
	hideTab(`String/Number id`) : void	TabPanel
	Hides the TabPanelItem with the specified id/index	TabPanel
	on(`String eventName`, `Function handler`, [`Object options`]) : void	Observable
	为该组件加入事件处理器函数, addListener 的简写方式	Observable
	purgeListeners() : void	Observable
	从对象身上移除所有的侦听器	Observable
	removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void	Observable
	移除侦听器	Observable
	removeTab(`String/Number id`) : void	TabPanel
	Remove a TabPanelItem.	TabPanel
	setTabWidth(`Number The`) : void	TabPanel
	Resizes all the tabs to the passed width	TabPanel
	syncHeight([`Number targetHeight`]) : void	TabPanel
	Updates the tab body element to fit the height of the container element for overflow scrolling	TabPanel
	un(`String eventName`, `Function handler`, [`Object scope`]) : void	Observable
	移除侦听器, removeListener 的简写方式	Observable
	unhideTab(`String/Number id`) : void	TabPanel
	"Unhides" the TabPanelItem with the specified id/index	TabPanel

公共事件

事件		定义对象
	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	TabPanel
	tabchange : (`Ext.TabPanel this`, `Ext.TabPanelItem activePanel`)	TabPanel
	Fires when the active tab changes	TabPanel

属性详情

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.

构造函数

TabPanel

public function TabPanel(String/HTMLElement/Element container, Boolean config)

Create new TabPanel.

参数：

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.

方法详情

activate

public function activate(String/Number id)

Activate a TabPanelItem. The currently active will be deactivated.

参数：

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

返回：

void

This method is defined by TabPanel.

addEvents

public function addEvents(Object object)

将对象中没有的事件从给出的对象中复制过来。给出的对象必须也继承于 Observable 对象此方法才会有效果。

参数：

object : Object
要复制事件的源对象

返回：

void

This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])

为组件添加一个事件监听器

参数：

eventName : String
侦听事件的类型
handler : Function
事件调用的方法
scope : Object
（可选）处理函数执行的作用域。处理函数 "this" 的内容。
options : Object
（可选）一个包含处理设置属性的对象。可以包含下列的属性：
- scope {Object} 处理函数执行的作用域。处理函数 "this" 的内容。
- delegate {String} 一个简单的选择器用来过滤目标或查找目标的子节点。
- stopEvent {Boolean} 值为 True 时用来中止事件。那样将中止传播，并防止缺省动作。
- preventDefault {Boolean} 值为 True 时用来防止缺省动作。
- stopPropagation {Boolean} 值为 True 时用来中止事件传播。
- normalized {Boolean} 值为 False 时向处理函数传递浏览器事件用以代替 Ext.EventObject 对象。
- delay {Number} 当事件触发后启用处理函数的延迟微秒数。
- single {Boolean} 值为 True 时将添加一个处理函数用来处理下个触发的事件，并在处理完后移除。
- buffer {Number} 使处理函数计划在由 Ext.util.DelayedTask 指定的微秒数后执行。如果事件在延迟期间再次触发，原来的处理函数将不再启动，而是由新的计划代替。
组合选项
使用选项参数可以组合不同类型的监听器：

下面是一个标准的、延迟执行的、一次性的监听器，将会自动停止事件并传递一个自定义的参数(forumId)
代码：
```
el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });
```
这个方法也允许传递的单个参数是一个包含多个指定处理函数的设置对象。

一次调用多个处理函数
代码：
```
el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });
```
或者简写为：
代码：
```
el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
```

返回：

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.

参数：

id : String
The id of the div to use or create
text : String
The text for the tab
content : String
（可选） Content to put in the TabPanelItem body
closable : Boolean
（可选） True to create a close icon on the tab

返回：

Ext.TabPanelItem
The created TabPanelItem

This method is defined by TabPanel.

addTabItem

public function addTabItem(Ext.TabPanelItem item)

Add an existing TabPanelItem.

参数：

item : Ext.TabPanelItem
The TabPanelItem to add

返回：

void

This method is defined by TabPanel.

autoSizeTabs

public function autoSizeTabs()

Manual call to resize the tabs (if resizeTabs is false this does nothing)

参数：

无。

返回：

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)

参数：

无。

返回：

void

This method is defined by TabPanel.

destroy

public function destroy([Boolean removeEl])

Destroys this TabPanel

参数：

removeEl : Boolean
（可选） True to remove the element from the DOM as well

返回：

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..

参数：

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

返回：

void

This method is defined by TabPanel.

enableTab

public function enableTab(String/Number id)

Enable a TabPanelItem that is disabled.

参数：

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

返回：

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)

参数：

无。

返回：

void

This method is defined by TabPanel.

fireEvent

public function fireEvent(String eventName, Object... args)

触发指定的事件并给出参数（至少要有事件名称）。

参数：

eventName : String
args : Object...
传入处理函数的参数

返回：

Boolean
如果任何处理函数返回 false 则返回值为 false, 否则返回 true。

This method is defined by Observable.

getActiveTab

public function getActiveTab()

Get the active TabPanelItem

参数：

无。

返回：

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

参数：

无。

返回：

Number

This method is defined by TabPanel.

getTab

public function getTab(String/Number id)

Returns the TabPanelItem with the specified id/index

参数：

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

返回：

Ext.TabPanelItem

This method is defined by TabPanel.

hasListener

public function hasListener(String eventName)

检查该对象是否拥有指定事件的侦听器

参数：

eventName : String
查询事件之名称

返回：

Boolean
值为 True 值表示事件监听器存在, 否则值为 false。

This method is defined by Observable.

hideTab

public function hideTab(String/Number id)

Hides the TabPanelItem with the specified id/index

参数：

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

返回：

void

This method is defined by TabPanel.

on

public function on(String eventName, Function handler, [Object options])

为该组件加入事件处理器函数, addListener 的简写方式

参数：

eventName : String
侦听事件的类型
handler : Function
事件调用的方法
options : Object
（可选）

返回：

void

This method is defined by Observable.

purgeListeners

public function purgeListeners()

从对象身上移除所有的侦听器

参数：

无。

返回：

void

This method is defined by Observable.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])

移除侦听器

参数：

eventName : String
侦听事件的类型
handler : Function
删除的处理函数
scope : Object
（可选） The scope (this object) for the handler

返回：

void

This method is defined by Observable.

removeTab

public function removeTab(String/Number id)

Remove a TabPanelItem.

参数：

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

返回：

void

This method is defined by TabPanel.

setTabWidth

public function setTabWidth(Number The)

Resizes all the tabs to the passed width

参数：

The : Number
new width

返回：

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

参数：

targetHeight : Number
（可选） Override the starting height from the elements height

返回：

void

This method is defined by TabPanel.

un

public function un(String eventName, Function handler, [Object scope])

移除侦听器, removeListener 的简写方式

参数：

eventName : String
侦听事件的类型
handler : Function
删除的处理函数
scope : Object
（可选） The scope (this object) for the handler

返回：

void

This method is defined by Observable.

unhideTab

public function unhideTab(String/Number id)

"Unhides" the TabPanelItem with the specified id/index

参数：

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

返回：

void

This method is defined by TabPanel.

事件详情

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.