Ext.tab.Bar | WebBuilder 文档

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

创建示例

var component = Ext.create("Ext.tab.Bar", {
  xtype: "tabbar",
  _reverseDockNames: {,
  ariaRole: 'tablist',
  baseCls: Ext.baseCSSPrefix + 'tab-bar',
  childEls: [,
  renderTo: Ext.getBody()
});

属性

属性	类型	默认值	说明	配置示例
`_reverseDockNames`	`Object`	`{`	配置组件的 `_reverseDockNames` 选项。	`_reverseDockNames: {`
`ariaRole`	`String`	`'tablist'`	组件在辅助技术中的 ARIA 角色。	`ariaRole: 'tablist'`
`baseCls`	`Mixed`	`Ext.baseCSSPrefix + 'tab-bar'`	配置 `baseCls` 对应的 CSS 类名。	`baseCls: Ext.baseCSSPrefix + 'tab-bar'`
`childEls`	`Array`	`[`	组件创建后需要引用的子 DOM 元素集合。	`childEls: [`
`defaultType`	`String`	`'tab'`	配置组件的 `defaultType` 选项。	`defaultType: 'tab'`
`isTabBar`	`Boolean`	`true`	控制是否启用 `isTabBar` 行为。	`isTabBar: true`
`plain`	`Boolean`	`false`	控制是否启用 `plain` 行为。	`plain: false`
`renderTpl`	`Array`	`[`	配置生成组件内容的 `renderTpl` 模板。	`renderTpl: [`

方法

方法	参数	说明	调用示例
`initComponent`	``	初始化组件及其子项。执行时会保留父类默认行为。源码涉及 `addCls()`、`addClsWithUI()`、`addEvents()`、`callParent()`。	`component.initComponent()`
`onRender`	``	生成 `on` 的渲染结果。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.onRender()`
`afterRender`	``	生成 `after` 的渲染结果。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.afterRender()`
`afterLayout`	``	在 `layout` 后执行后处理。执行时会保留父类默认行为。源码涉及 `adjustTabPositions()`、`callParent()`。	`component.afterLayout()`
`adjustTabPositions`	``	调整 `tabPositions`。	`component.adjustTabPositions()`
`getLayout`	``	读取并返回 `layout`。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.getLayout()`
`onAdd`	`tab`	处理 `add` 回调。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.onAdd(...)`
`onRemove`	`tab`	处理 `remove` 回调。执行时会保留父类默认行为、更新 `previousTab` 状态。源码涉及 `callParent()`。	`component.onRemove(...)`
`afterComponentLayout`	`width`	在 `componentLayout` 后执行后处理。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.afterComponentLayout(...)`
`onClick`	`e, target`	处理 `click` 回调。源码涉及 `getTabInfoFromPoint()`、`setActiveTab()`。	`component.onClick(...)`
`onMouseMove`	`e`	处理 `mouseMove` 回调。执行时会更新 `_overTab` 状态。源码涉及 `getTabInfoFromPoint()`。	`component.onMouseMove(...)`
`onMouseLeave`	`e`	处理 `mouseLeave` 回调。	`component.onMouseLeave(...)`
`getTabInfoFromPoint`	`xy`	读取并返回 `tabInfoFromPoint`。执行时会更新 `_isTabReversed` 状态。源码涉及 `getCloseXY()`。	`component.getTabInfoFromPoint(...)`
`getCloseXY`	`closeEl, tabX, tabY, tabWidth, tabHeight, closeWidth, closeHeight, direction`	读取并返回 `closeXY`。	`component.getCloseXY(...)`
`closeTab`	`toClose`	处理 `closeTab` 操作。源码涉及 `findNextActivatable()`、`remove()`、`setActiveTab()`。	`component.closeTab(...)`
`findNextActivatable`	`toClose`	查找 `nextActivatable`。	`component.findNextActivatable(...)`
`setActiveTab`	`tab, initial`	设置 `activeTab`。执行时会派发 `change` 事件、刷新界面或布局、更新 `previousTab`、`activeTab` 状态。源码涉及 `fireEvent()`、`updateLayout()`。	`component.setActiveTab(...)`

事件

事件	说明	监听示例
`change`	组件值发生变化时触发。源码在 `setActiveTab()` 中通过 `fireEvent()` 触发。	`listeners: { change: function () {} }`