Skip to content
WebBuilder 文档

Ext.slider.Multi

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

Updated View as Markdown

源码定义：ext-all-debug.js:140350。分类：选择器与滑块。

创建示例

var component = Ext.create("Ext.slider.Multi", {
  xtype: "multislider",
  animate: true,
  ariaRole: 'slider',
  childEls: [,
  clickToChange: true,
  renderTo: Ext.getBody()
});

属性

属性 类型 默认值 说明 配置示例
animate Boolean true 控制值或位置变化时是否使用动画。 animate: true
ariaRole String 'slider' 组件在辅助技术中的 ARIA 角色。 ariaRole: 'slider'
childEls Array [ 组件创建后需要引用的子 DOM 元素集合。 childEls: [
clickToChange Boolean true 控制点击滑轨时是否改变当前值。 clickToChange: true
componentLayout String 'sliderfield' 组件采用的内部布局策略。 componentLayout: 'sliderfield'
constrainThumbs Boolean true 控制多个滑块手柄是否限制在允许的相对位置内。 constrainThumbs: true
decimalPrecision Number 0 值规范化时保留的小数位数。 decimalPrecision: 0
dragging Boolean false 标记组件当前是否处于拖动状态。 dragging: false
fieldSubTpl Array [ 字段 HTML 的子模板片段。 fieldSubTpl: [
horizontalProp String 'left' 水平模式下用于定位的 CSS 属性。 horizontalProp: 'left'
increment Number 0 值调整时采用的步进间隔。 increment: 0
keyIncrement Number 1 键盘方向键调整值时采用的步进间隔。 keyIncrement: 1
maxValue Number 100 允许设置的最大值。 maxValue: 100
minValue Number 0 允许设置的最小值。 minValue: 0
onDragEnd Mixed Ext.emptyFn 结束拖动手柄时执行的回调函数。 onDragEnd: Ext.emptyFn
onDragStart Mixed Ext.emptyFn 开始拖动手柄时执行的回调函数。 onDragStart: Ext.emptyFn
tipText Object/null null 滑块提示文字的生成配置。 tipText: null
transformTrackPoints Mixed Ext.identityFn 将滑轨坐标转换为组件坐标的函数。 transformTrackPoints: Ext.identityFn
useTips Boolean true 控制拖动时是否显示数值提示。 useTips: true
vertical Boolean false 控制组件是否以垂直方向显示。 vertical: false

方法

方法 参数 说明 调用示例
initValue `` 初始化 value。 执行时会更新 originalValue 状态。源码涉及 addThumb()、normalizeValue()。 component.initValue()
initComponent `` 初始化组件及其子项。 执行时会保留父类默认行为、更新 thumbs、keyIncrement 状态。源码涉及 addEvents()、callParent()。 component.initComponent()
addThumb value 添加 thumb。源码涉及 getComponentLayout()。 component.addThumb(...)
promoteThumb topThumb 提升 thumb 的优先级。 执行时会更新 thumbStack 状态。 component.promoteThumb(...)
getSubTplData `` 读取并返回 subTplData。 执行时会保留父类默认行为。源码涉及 callParent()。 component.getSubTplData()
onRender `` 生成 on 的渲染结果。 执行时会保留父类默认行为。源码涉及 callParent()。 component.onRender()
initEvents `` 初始化 events。源码涉及 mon()。 component.initEvents()
getTrackpoint xy 读取并返回 trackpoint。源码涉及 transformTrackPoints()。 component.getTrackpoint(...)
onMouseDown e 处理 mouseDown 回调。源码涉及 getTrackpoint()、onClickChange()、focus()。 component.onMouseDown(...)
onClickChange trackPoint 处理 clickChange 回调。 执行时会更新组件值。源码涉及 getNearest()、setValue()、reversePixelValue()。 component.onClickChange(...)
getNearest trackPoint 读取并返回 nearest。源码涉及 reversePixelValue()、getRange()。 component.getNearest(...)
onKeyDown e 处理 keyDown 回调。 执行时会更新组件值。源码涉及 getValue()、setValue()。 component.onKeyDown(...)
normalizeValue v 规范化 value。 component.normalizeValue(...)
setMinValue val 设置 minValue。 执行时会更新组件值、同步关联状态、更新 minValue 状态。源码涉及 setValue()、syncThumbs()。 component.setMinValue(...)
setMaxValue val 设置 maxValue。 执行时会更新组件值、同步关联状态、更新 maxValue 状态。源码涉及 setValue()、syncThumbs()。 component.setMaxValue(...)
setValue index, value, animate, changeComplete 设置 value。 执行时会派发 beforechange、change、changecomplete 事件。源码涉及 normalizeValue()、fireEvent()、calculateThumbPosition()、checkDirty()。 component.setValue(...)
calculateThumbPosition v 计算 thumbPosition。源码涉及 getRange()。 component.calculateThumbPosition(...)
getRatio `` 读取并返回 ratio。源码涉及 getRange()。 component.getRatio()
getRange `` 读取并返回 range。 component.getRange()
reversePixelValue pos 反向换算 pixelValue。源码涉及 getRatio()。 component.reversePixelValue(...)
reversePercentageValue pos 反向换算 percentageValue。源码涉及 getRange()。 component.reversePercentageValue(...)
onDisable `` 处理 disable 回调。 执行时会保留父类默认行为、更新 thumbHolder 状态。源码涉及 callParent()。 component.onDisable()
onEnable `` 处理 enable 回调。 执行时会保留父类默认行为、同步关联状态。源码涉及 callParent()、syncThumbs()。 component.onEnable()
syncThumbs `` 同步 thumbs。源码涉及 calculateThumbPosition()。 component.syncThumbs()
getValue index 读取并返回 value。源码涉及 getValues()。 component.getValue(...)
getValues `` 读取并返回 values。 component.getValues()
getSubmitValue `` 读取并返回 submitValue。源码涉及 getValue()。 component.getSubmitValue()
reset `` 将组件恢复为初始状态。 执行时会更新组件值。源码涉及 setValue()、clearInvalid()。 component.reset()
setReadOnly readOnly 设置 readOnly。 执行时会保留父类默认行为。源码涉及 callParent()。 component.setReadOnly(...)
beforeDestroy `` 在 destroy 前执行预处理。 执行时会保留父类默认行为。源码涉及 callParent()。 component.beforeDestroy()

事件

事件 说明 监听示例
beforechange 组件值变化前触发；监听器返回 false 可取消变更。 源码在 setValue() 中通过 fireEvent() 触发。 listeners: { beforechange: function () {} }
change 组件值发生变化时触发。 源码在 setValue() 中通过 fireEvent() 触发。 listeners: { change: function () {} }
changecomplete 值调整完成后触发。 源码在 setValue() 中通过 fireEvent() 触发。 listeners: { changecomplete: function () {} }
drag 拖动过程中触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 listeners: { drag: function () {} }
dragend 拖动结束时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 listeners: { dragend: function () {} }
dragstart 开始拖动时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 listeners: { dragstart: function () {} }
Navigation

Type to search…

↑↓ navigate↵ selectEsc close