Ext.tab.Tab | WebBuilder 文档

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

创建示例

var component = Ext.create("Ext.tab.Tab", {
  xtype: "tab",
  active: false,
  activeCls: 'active',
  ariaRole: 'tab',
  baseCls: Ext.baseCSSPrefix + 'tab',
  renderTo: Ext.getBody()
});

属性

属性	类型	默认值	说明	配置示例
`active`	`Boolean`	`false`	控制是否启用 `active` 行为。	`active: false`
`activeCls`	`String`	`'active'`	配置 `activeCls` 对应的 CSS 类名。	`activeCls: 'active'`
`ariaRole`	`String`	`'tab'`	组件在辅助技术中的 ARIA 角色。	`ariaRole: 'tab'`
`baseCls`	`Mixed`	`Ext.baseCSSPrefix + 'tab'`	配置 `baseCls` 对应的 CSS 类名。	`baseCls: Ext.baseCSSPrefix + 'tab'`
`childEls`	`Array`	`[`	组件创建后需要引用的子 DOM 元素集合。	`childEls: [`
`closable`	`Boolean`	`true`	控制组件是否显示关闭操作。	`closable: true`
`closableCls`	`String`	`'closable'`	配置 `closableCls` 对应的 CSS 类名。	`closableCls: 'closable'`
`closeElOverCls`	`Mixed`	`Ext.baseCSSPrefix + 'tab-close-btn-over'`	配置 `closeElOverCls` 对应的 CSS 类名。	`closeElOverCls: Ext.baseCSSPrefix + 'tab-close-btn-over'`
`closeText`	`String`	`'Close Tab'`	配置组件的 `closeText` 选项。	`closeText: 'Close Tab'`
`isTab`	`Boolean`	`true`	控制是否启用 `isTab` 行为。	`isTab: true`
`position`	`String`	`'top'`	配置组件的 `position` 选项。	`position: 'top'`
`scale`	`Boolean`	`false`	控制是否启用 `scale` 行为。	`scale: false`

方法

方法	参数	说明	调用示例
`initComponent`	``	初始化组件及其子项。执行时会保留父类默认行为、更新 `overCls` 状态。源码涉及 `addEvents()`、`callParent()`、`setCard()`。	`component.initComponent()`
`getTemplateArgs`	``	读取并返回 `templateArgs`。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.getTemplateArgs()`
`getFramingInfoCls`	``	读取并返回 `framingInfoCls`。	`component.getFramingInfoCls()`
`beforeRender`	``	生成 `before` 的渲染结果。执行时会保留父类默认行为、同步关联状态、更新 `minWidth`、`maxWidth` 状态。源码涉及 `up()`、`callParent()`、`addClsWithUI()`、`syncClosableUI()`。	`component.beforeRender()`
`onRender`	``	生成 `on` 的渲染结果。执行时会保留父类默认行为。源码涉及 `setElOrientation()`、`callParent()`、`initKeyNav()`。	`component.onRender()`
`initKeyNav`	``	初始化 `keyNav`。执行时会更新 `keyNav` 状态。	`component.initKeyNav()`
`setElOrientation`	``	设置 `elOrientation`。	`component.setElOrientation()`
`enable`	`silent`	启用组件。执行时会保留父类默认行为。源码涉及 `callParent()`、`removeClsWithUI()`。	`component.enable(...)`
`disable`	`silent`	禁用组件。执行时会保留父类默认行为。源码涉及 `callParent()`、`addClsWithUI()`。	`component.disable(...)`
`onDestroy`	``	处理 `destroy` 回调。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.onDestroy()`
`setClosable`	`closable`	设置 `closable`。执行时会刷新界面或布局、同步关联状态、更新 `closable` 状态。源码涉及 `syncClosableUI()`、`syncClosableElements()`、`updateLayout()`。	`component.setClosable(...)`
`syncClosableElements`	``	同步 `closableElements`。执行时会更新 `closeEl` 状态。	`component.syncClosableElements()`
`syncClosableUI`	``	同步 `closableUI`。源码涉及 `addClsWithUI()`、`removeClsWithUI()`。	`component.syncClosableUI()`
`setCard`	`card`	设置 `card`。执行时会更新 `card` 状态。源码涉及 `setText()`、`setIconCls()`、`setIcon()`、`setGlyph()`。	`component.setCard(...)`
`onCloseClick`	``	处理 `closeClick` 回调。执行时会派发 `beforeclose` 事件。源码涉及 `fireEvent()`、`fireClose()`。	`component.onCloseClick()`
`fireClose`	``	触发 `close`。执行时会派发 `close` 事件。源码涉及 `fireEvent()`。	`component.fireClose()`
`onEnterKey`	`e`	处理 `enterKey` 回调。	`component.onEnterKey(...)`
`onDeleteKey`	`e`	处理 `deleteKey` 回调。源码涉及 `onCloseClick()`。	`component.onDeleteKey(...)`
`afterClick`	`isCloseClick`	在 `click` 后执行后处理。源码涉及 `focus()`。	`component.afterClick(...)`
`activate`	`supressEvent`	激活当前组件。执行时会派发 `activate` 事件、更新 `active` 状态。源码涉及 `addClsWithUI()`、`fireEvent()`。	`component.activate(...)`
`deactivate`	`supressEvent`	停用当前组件。执行时会派发 `deactivate` 事件、更新 `active` 状态。源码涉及 `removeClsWithUI()`、`fireEvent()`。	`component.deactivate(...)`

事件

事件	说明	监听示例
`activate`	组件首次获得活动状态时触发。源码在 `activate()` 中通过 `fireEvent()` 触发。	`listeners: { activate: function () {} }`
`beforeclose`	组件关闭前触发；监听器返回 `false` 可取消关闭。源码在 `onCloseClick()` 中通过 `fireEvent()` 触发。	`listeners: { beforeclose: function () {} }`
`close`	组件关闭完成后触发。源码在 `fireClose()` 中通过 `fireEvent()` 触发。	`listeners: { close: function () {} }`
`deactivate`	组件失去活动状态时触发。源码在 `deactivate()` 中通过 `fireEvent()` 触发。	`listeners: { deactivate: function () {} }`