Ext.panel.Tool | WebBuilder 文档

源码定义：ext-all-debug.js:137629。分类：容器、面板与窗口。

创建示例

var component = Ext.create("Ext.panel.Tool", {
  xtype: "tool",
  ariaRole: 'button',
  baseCls: Ext.baseCSSPrefix + 'tool',
  childEls: [,
  disabledCls: Ext.baseCSSPrefix + 'tool-disabled',
  renderTo: Ext.getBody()
});

属性

属性	类型	默认值	说明	配置示例
`ariaRole`	`String`	`'button'`	组件在辅助技术中的 ARIA 角色。	`ariaRole: 'button'`
`baseCls`	`Mixed`	`Ext.baseCSSPrefix + 'tool'`	配置 `baseCls` 对应的 CSS 类名。	`baseCls: Ext.baseCSSPrefix + 'tool'`
`childEls`	`Array`	`[`	组件创建后需要引用的子 DOM 元素集合。	`childEls: [`
`disabledCls`	`Mixed`	`Ext.baseCSSPrefix + 'tool-disabled'`	配置 `disabledCls` 对应的 CSS 类名。	`disabledCls: Ext.baseCSSPrefix + 'tool-disabled'`
`height`	`Number`	`15`	组件高度。	`height: 15`
`isTool`	`Boolean`	`true`	控制是否启用 `isTool` 行为。	`isTool: true`
`renderTpl`	`Array`	`[`	配置生成组件内容的 `renderTpl` 模板。	`renderTpl: [`
`stopEvent`	`Boolean`	`true`	控制是否启用 `stopEvent` 行为。	`stopEvent: true`
`toolOverCls`	`Mixed`	`Ext.baseCSSPrefix + 'tool-over'`	配置 `toolOverCls` 对应的 CSS 类名。	`toolOverCls: Ext.baseCSSPrefix + 'tool-over'`
`toolOwner`	`Object/null`	`null`	配置组件的 `toolOwner` 选项。	`toolOwner: null`
`toolPressedCls`	`Mixed`	`Ext.baseCSSPrefix + 'tool-pressed'`	配置 `toolPressedCls` 对应的 CSS 类名。	`toolPressedCls: Ext.baseCSSPrefix + 'tool-pressed'`
`tooltipType`	`String`	`'qtip'`	配置组件的 `tooltipType` 选项。	`tooltipType: 'qtip'`
`width`	`Number`	`15`	组件宽度。	`width: 15`

方法

方法	参数	说明	调用示例
`initComponent`	``	初始化组件及其子项。执行时会保留父类默认行为、更新 `height`、`width` 状态。源码涉及 `addEvents()`、`callParent()`。	`component.initComponent()`
`afterRender`	``	生成 `after` 的渲染结果。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.afterRender()`
`getFocusEl`	``	读取并返回 `focusEl`。	`component.getFocusEl()`
`setType`	`type`	设置 `type`。执行时会更新 `type` 状态。	`component.setType(...)`
`onClick`	`e, target`	处理 `click` 回调。执行时会派发 `click` 事件。源码涉及 `fireEvent()`。	`component.onClick(...)`
`onDestroy`	``	处理 `destroy` 回调。执行时会保留父类默认行为。源码涉及 `callParent()`。	`component.onDestroy()`
`onMouseDown`	``	处理 `mouseDown` 回调。	`component.onMouseDown()`
`onMouseOver`	``	处理 `mouseOver` 回调。	`component.onMouseOver()`
`onMouseOut`	``	处理 `mouseOut` 回调。	`component.onMouseOut()`

事件

事件	说明	监听示例
`click`	用户点击组件时触发。源码在 `onClick()` 中通过 `fireEvent()` 触发。	`listeners: { click: function () {} }`