Skip to content
WebBuilder 文档

Ext.button.Button

xtype 为 button 的 Ext JS 原生组件参考。

Updated View as Markdown

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

创建示例

var component = Ext.create("Ext.button.Button", {
  xtype: "button",
  _triggerRegion: {},
  ariaRole: 'button',
  arrowAlign: 'right',
  arrowCls: 'arrow',
  renderTo: Ext.getBody()
});

属性

属性 类型 默认值 说明 配置示例
_triggerRegion Object {} 配置组件的 _triggerRegion 选项。 _triggerRegion: {}
ariaRole String 'button' 组件在辅助技术中的 ARIA 角色。 ariaRole: 'button'
arrowAlign String 'right' 配置组件的 arrowAlign 选项。 arrowAlign: 'right'
arrowCls String 'arrow' 配置 arrowCls 对应的 CSS 类名。 arrowCls: 'arrow'
autoEl Object { 配置组件的 autoEl 选项。 autoEl: {
baseCls Mixed Ext.baseCSSPrefix + 'btn' 配置 baseCls 对应的 CSS 类名。 baseCls: Ext.baseCSSPrefix + 'btn'
childEls Array [ 组件创建后需要引用的子 DOM 元素集合。 childEls: [
clickEvent String 'click' 配置组件的 clickEvent 选项。 clickEvent: 'click'
componentLayout String 'button' 组件采用的内部布局策略。 componentLayout: 'button'
destroyMenu Boolean true 控制是否启用 destroyMenu 行为。 destroyMenu: true
disabled Boolean false 控制组件是否禁用。 disabled: false
enableToggle Boolean false 控制是否启用 enableToggle 行为。 enableToggle: false
focusCls String 'focus' 配置 focusCls 对应的 CSS 类名。 focusCls: 'focus'
frame Boolean true 控制是否启用 frame 行为。 frame: true
handleMouseEvents Boolean true 控制是否启用 handleMouseEvents 行为。 handleMouseEvents: true
hidden Boolean false 控制组件初始是否隐藏。 hidden: false
hrefTarget String '_blank' 配置组件的 hrefTarget 选项。 hrefTarget: '_blank'
iconAlign String 'left' 配置组件的 iconAlign 选项。 iconAlign: 'left'
isButton Boolean true 控制是否启用 isButton 行为。 isButton: true
maskOnDisable Boolean false 控制是否启用 maskOnDisable 行为。 maskOnDisable: false
menuActiveCls String 'menu-active' 配置 menuActiveCls 对应的 CSS 类名。 menuActiveCls: 'menu-active'
menuAlign String 'tl-bl?' 配置组件的 menuAlign 选项。 menuAlign: 'tl-bl?'
overCls String 'over' 配置 overCls 对应的 CSS 类名。 overCls: 'over'
pressed Boolean false 控制是否启用 pressed 行为。 pressed: false
pressedCls String 'pressed' 配置 pressedCls 对应的 CSS 类名。 pressedCls: 'pressed'
preventDefault Boolean true 控制是否启用 preventDefault 行为。 preventDefault: true
renderTpl Array [ 配置生成组件内容的 renderTpl 模板。 renderTpl: [
scale String 'small' 配置组件的 scale 选项。 scale: 'small'
showEmptyMenu Boolean false 控制是否显示 emptyMenu。 showEmptyMenu: false
shrinkWrap Number 3 配置组件的 shrinkWrap 选项。 shrinkWrap: 3
tabIndex Number 0 配置组件的 tabIndex 选项。 tabIndex: 0
textAlign String 'center' 配置组件的 textAlign 选项。 textAlign: 'center'
tooltipType String 'qtip' 配置组件的 tooltipType 选项。 tooltipType: 'qtip'

方法

方法 参数 说明 调用示例
hasFrameTable `` 检查是否存在 frameTable。 component.hasFrameTable()
frameTableListener `` 处理 frameTableListener 操作。源码涉及 doNavigate()。 component.frameTableListener()
doNavigate `` 执行 navigate 操作。源码涉及 getHref()。 component.doNavigate()
initComponent `` 初始化组件及其子项。 执行时会保留父类默认行为、更新 height、cls 状态。源码涉及 addCls()、callParent()、addEvents()、setMenu()。 component.initComponent()
getActionEl `` 读取并返回 actionEl。 component.getActionEl()
getFocusEl `` 读取并返回 focusEl。 component.getFocusEl()
setComponentCls `` 设置 componentCls。 执行时会更新 oldCls 状态。源码涉及 getComponentCls()、removeClsWithUI()、addClsWithUI()。 component.setComponentCls()
getComponentCls `` 读取并返回 componentCls。 component.getComponentCls()
getElConfig `` 读取并返回 elConfig。 执行时会保留父类默认行为。源码涉及 callParent()、getHref()。 component.getElConfig()
beforeRender `` 生成 before 的渲染结果。 执行时会保留父类默认行为、更新 oldCls 状态。源码涉及 callParent()、getComponentCls()、addClsWithUI()、getTemplateArgs()。 component.beforeRender()
setMenu menu, destroyMenu 设置 menu。 执行时会刷新界面或布局、更新 split、menu 状态。源码涉及 mon()、getSplitCls()、updateLayout()。 component.setMenu(...)
onRender `` 生成 on 的渲染结果。 执行时会保留父类默认行为、更新 doc、keyMap 状态。源码涉及 callParent()、setTooltip()、mon()、hasFrameTable()。 component.onRender()
getTemplateArgs `` 读取并返回 templateArgs。源码涉及 getInnerCls()、getSplitCls()。 component.getTemplateArgs()
setHref href 设置 href。 执行时会更新 href 状态。源码涉及 getHref()。 component.setHref(...)
getHref `` 读取并返回 href。 component.getHref()
setParams params 设置 params。 执行时会更新 params 状态。源码涉及 getHref()。 component.setParams(...)
getSplitCls `` 读取并返回 splitCls。 component.getSplitCls()
getInnerCls `` 读取并返回 innerCls。 component.getInnerCls()
setIcon icon 设置 icon。 执行时会派发 iconchange 事件、刷新界面或布局、更新 icon 状态。源码涉及 setComponentCls()、didIconStateChange()、updateLayout()、fireEvent()。 component.setIcon(...)
setIconCls cls 设置 iconCls。 执行时会派发 iconchange 事件、刷新界面或布局、更新 iconCls 状态。源码涉及 setComponentCls()、didIconStateChange()、updateLayout()、fireEvent()。 component.setIconCls(...)
setGlyph glyph 设置 glyph。 执行时会派发 glyphchange 事件、更新 glyph 状态。源码涉及 fireEvent()。 component.setGlyph(...)
setTooltip tooltip, initial 设置 tooltip。 执行时会更新 tooltip 状态。源码涉及 clearTip()、getTipAttr()。 component.setTooltip(...)
setTextAlign align 设置 textAlign。 执行时会更新 textAlign 状态。 component.setTextAlign(...)
getTipAttr `` 读取并返回 tipAttr。 component.getTipAttr()
getRefItems deep 读取并返回 refItems。 component.getRefItems(...)
clearTip `` 清空 tip。源码涉及 getTipAttr()。 component.clearTip()
beforeDestroy `` 在 destroy 前执行预处理。 执行时会保留父类默认行为。源码涉及 clearTip()、callParent()。 component.beforeDestroy()
onDestroy `` 处理 destroy 回调。 执行时会保留父类默认行为。源码涉及 callParent()。 component.onDestroy()
setHandler handler, scope 设置 handler。 执行时会更新 handler、scope 状态。 component.setHandler(...)
setText text 设置 text。 执行时会派发 textchange 事件、刷新界面或布局、更新 text 状态。源码涉及 setComponentCls()、updateLayout()、fireEvent()。 component.setText(...)
didIconStateChange old, current 处理 didIconStateChange 操作。 component.didIconStateChange(...)
getText `` 读取并返回 text。 component.getText()
toggle state, suppressEvent 切换当前组件。 执行时会派发 toggle 事件、更新 pressed 状态。源码涉及 fireEvent()。 component.toggle(...)
maybeShowMenu `` 处理 maybeShowMenu 操作。源码涉及 hasVisibleMenu()、showMenu()。 component.maybeShowMenu()
showMenu fromEvent 显示 menu。源码涉及 getTipAttr()。 component.showMenu(...)
hideMenu `` 隐藏 menu。源码涉及 hasVisibleMenu()。 component.hideMenu()
hasVisibleMenu `` 检查是否存在 visibleMenu。 component.hasVisibleMenu()
onRepeatClick repeat, e 处理 repeatClick 回调。源码涉及 onClick()。 component.onRepeatClick(...)
onClick e 处理 click 回调。源码涉及 doPreventDefault()、doToggle()、maybeShowMenu()、fireHandler()。 component.onClick(...)
doPreventDefault e 执行 preventDefault 操作。源码涉及 getHref()。 component.doPreventDefault(...)
fireHandler e 触发 handler。 执行时会派发 click 事件。源码涉及 fireEvent()、blur()。 component.fireHandler(...)
doToggle `` 执行 toggle 操作。源码涉及 toggle()。 component.doToggle()
onMouseOver e 处理 mouseOver 回调。源码涉及 onMouseEnter()。 component.onMouseOver(...)
onMouseOut e 处理 mouseOut 回调。源码涉及 onMenuTriggerOut()、onMouseLeave()。 component.onMouseOut(...)
onMouseMove e 处理 mouseMove 回调。源码涉及 getX()、getTriggerRegion()、onMenuTriggerOver()、onMenuTriggerOut()。 component.onMouseMove(...)
getTriggerRegion `` 读取并返回 triggerRegion。源码涉及 getTriggerSize()、getWidth()、getHeight()。 component.getTriggerRegion()
getTriggerSize `` 读取并返回 triggerSize。 执行时会更新 triggerSize 状态。源码涉及 getBtnWrapFrameWidth()。 component.getTriggerSize()
getBtnWrapFrameWidth side 读取并返回 btnWrapFrameWidth。 component.getBtnWrapFrameWidth(...)
addOverCls `` 添加 overCls。源码涉及 addClsWithUI()。 component.addOverCls()
removeOverCls `` 移除 overCls。源码涉及 removeClsWithUI()。 component.removeOverCls()
onMouseEnter e 处理 mouseEnter 回调。 执行时会派发 mouseover 事件。源码涉及 fireEvent()。 component.onMouseEnter(...)
onMouseLeave e 处理 mouseLeave 回调。 执行时会派发 mouseout 事件。源码涉及 fireEvent()。 component.onMouseLeave(...)
onMenuTriggerOver e 处理 menuTriggerOver 回调。 执行时会派发 menutriggerover 事件、更新 overMenuTrigger 状态。源码涉及 getTipAttr()、fireEvent()。 component.onMenuTriggerOver(...)
onMenuTriggerOut e 处理 menuTriggerOut 回调。 执行时会派发 menutriggerout 事件。源码涉及 getTipAttr()、fireEvent()。 component.onMenuTriggerOut(...)
enable silent 启用组件。 执行时会保留父类默认行为。源码涉及 callParent()、removeClsWithUI()。 component.enable(...)
disable silent 禁用组件。 执行时会保留父类默认行为。源码涉及 callParent()、addClsWithUI()、removeClsWithUI()。 component.disable(...)
setScale scale 设置 scale。 执行时会更新 scale 状态。源码涉及 setUI()。 component.setScale(...)
setUI ui 设置 uI。 执行时会保留父类默认行为。源码涉及 callParent()。 component.setUI(...)
onMouseDown e 处理 mouseDown 回调。源码涉及 getFocusEl()、addClsWithUI()。 component.onMouseDown(...)
onMouseUp e 处理 mouseUp 回调。源码涉及 removeClsWithUI()。 component.onMouseUp(...)
onMenuShow e 处理 menuShow 回调。 执行时会派发 menushow 事件、更新 ignoreNextClick 状态。源码涉及 addClsWithUI()、fireEvent()。 component.onMenuShow(...)
onMenuHide e 处理 menuHide 回调。 执行时会派发 menuhide 事件、更新 ignoreNextClick 状态。源码涉及 removeClsWithUI()、fireEvent()、focus()。 component.onMenuHide(...)
restoreClick `` 还原 click。 执行时会更新 ignoreNextClick 状态。 component.restoreClick()
onDownKey k, e 处理 downKey 回调。源码涉及 showMenu()。 component.onDownKey(...)

事件

事件 说明 监听示例
click 用户点击组件时触发。 源码在 fireHandler() 中通过 fireEvent() 触发。 listeners: { click: function () {} }
glyphchange 组件字形图标改变后触发。 源码在 setGlyph() 中通过 fireEvent() 触发。 listeners: { glyphchange: function () {} }
iconchange 组件图标改变后触发。 源码在 setIcon()、setIconCls() 中通过 fireEvent() 触发。 listeners: { iconchange: function () {} }
menuhide 菜单隐藏后触发。 源码在 onMenuHide() 中通过 fireEvent() 触发。 listeners: { menuhide: function () {} }
menushow 菜单显示后触发。 源码在 onMenuShow() 中通过 fireEvent() 触发。 listeners: { menushow: function () {} }
menutriggerout 鼠标移出菜单触发区域时触发。 源码在 onMenuTriggerOut() 中通过 fireEvent() 触发。 listeners: { menutriggerout: function () {} }
menutriggerover 鼠标移入菜单触发区域时触发。 源码在 onMenuTriggerOver() 中通过 fireEvent() 触发。 listeners: { menutriggerover: function () {} }
mouseout 鼠标移出组件时触发。 源码在 onMouseLeave() 中通过 fireEvent() 触发。 listeners: { mouseout: function () {} }
mouseover 鼠标移动到组件上方时触发。 源码在 onMouseEnter() 中通过 fireEvent() 触发。 listeners: { mouseover: function () {} }
textchange 输入文本变化后触发。 源码在 setText() 中通过 fireEvent() 触发。 listeners: { textchange: function () {} }
toggle 组件切换按下或选中状态后触发。 源码在 toggle() 中通过 fireEvent() 触发。 listeners: { toggle: function () {} }
Navigation

Type to search…

↑↓ navigate↵ selectEsc close