Ext.tab.Panel | WebBuilder 文档

源码定义：ext-all-debug.js:142774。分类：按钮、工具栏、菜单与标签页。

创建示例

var component = Ext.create("Ext.tab.Panel", {
  xtype: "tabpanel",
  deferredRender: true,
  itemCls: Ext.baseCSSPrefix + 'tabpanel-child',
  maxTabWidth: undefined,
  minTabWidth: undefined,
  renderTo: Ext.getBody()
});

属性

属性	类型	默认值	说明	配置示例
`deferredRender`	`Boolean`	`true`	控制是否启用 `deferredRender` 行为。	`deferredRender: true`
`itemCls`	`Mixed`	`Ext.baseCSSPrefix + 'tabpanel-child'`	配置 `itemCls` 对应的 CSS 类名。	`itemCls: Ext.baseCSSPrefix + 'tabpanel-child'`
`maxTabWidth`	`Mixed`	`undefined`	配置 `maxTabWidth` 限制值。	`maxTabWidth: undefined`
`minTabWidth`	`Mixed`	`undefined`	配置 `minTabWidth` 限制值。	`minTabWidth: undefined`
`plain`	`Boolean`	`false`	控制是否启用 `plain` 行为。	`plain: false`
`removePanelHeader`	`Boolean`	`true`	控制是否启用 `removePanelHeader` 行为。	`removePanelHeader: true`
`tabPosition`	`String`	`'top'`	配置组件的 `tabPosition` 选项。	`tabPosition: 'top'`

方法

方法	参数	说明	调用示例
`initComponent`	``	初始化组件及其子项。执行时会保留父类默认行为、更新 `activeTab`、`plugins` 状态。源码涉及 `addEvents()`、`callParent()`、`getComponent()`。	`component.initComponent()`
`setActiveTab`	`card`	设置 `activeTab`。执行时会派发 `beforetabchange`、`tabchange` 事件、更新 `activeTab` 状态。源码涉及 `getComponent()`、`getActiveTab()`、`fireEvent()`、`add()`。	`component.setActiveTab(...)`
`getActiveTab`	``	读取并返回 `activeTab`。执行时会更新 `activeTab` 状态。源码涉及 `getComponent()`。	`component.getActiveTab()`
`getTabBar`	``	读取并返回 `tabBar`。	`component.getTabBar()`
`onAdd`	`item, index`	处理 `add` 回调。	`component.onAdd(...)`
`onItemEnable`	`item`	处理 `itemEnable` 回调。	`component.onItemEnable(...)`
`onItemDisable`	`item`	处理 `itemDisable` 回调。	`component.onItemDisable(...)`
`onItemBeforeShow`	`item`	处理 `itemBeforeShow` 回调。源码涉及 `setActiveTab()`。	`component.onItemBeforeShow(...)`
`onItemIconChange`	`item, newIcon`	处理 `itemIconChange` 回调。	`component.onItemIconChange(...)`
`onItemIconClsChange`	`item, newIconCls`	处理 `itemIconClsChange` 回调。	`component.onItemIconClsChange(...)`
`onItemTitleChange`	`item, newTitle`	处理 `itemTitleChange` 回调。	`component.onItemTitleChange(...)`
`doRemove`	`item, autoDestroy`	执行 `remove` 操作。执行时会保留父类默认行为、更新 `activeTab` 状态。源码涉及 `setActiveTab()`、`callParent()`。	`component.doRemove(...)`
`onRemove`	`item, destroying`	处理 `remove` 回调。	`component.onRemove(...)`

事件

事件	说明	监听示例
`beforetabchange`	切换标签页前触发；监听器返回 `false` 可取消切换。源码在 `setActiveTab()` 中通过 `fireEvent()` 触发。	`listeners: { beforetabchange: function () {} }`
`tabchange`	当前活动标签页改变后触发。源码在 `setActiveTab()` 中通过 `fireEvent()` 触发。	`listeners: { tabchange: function () {} }`