1，在Ext 6.5.3的classic版中没有提供开关控件，参照modern版中 togglefield开关的实现，继承滑动器（sliderfield），自定义一个开关按钮。支持value绑定和点击切换状态以及表单提交。
2，完成后效果如图:
3， js代码如下：
//基于滑动器自定义开关控件, by xxx
Ext.define('ux.slider.Toggle', {
extend: 'Ext.slider.Single',
alias: 'widget.uxSliderToggle',
cls: 'ux-uxSliderToggle',
openedCls: 'ux-uxSliderToggle-toggled',
//不需要切换动画，效果更好
animate: false,
//关闭点击滚动轴切换功能（轴上存在一定盲区，此时判断点击位置不够，值不会发生变化），统一改为点击事件切换
clickToChange: false,
minValue: 0,
maxValue: 1,
width: 50,
initComponent: function () {
var me = this;
me.callParent();
me.on({
'change': {
fn: me.onChange
},
el: {
'click': {
fn: me.onElClick,
scope: me
}
}
});
if (me.getValue()) {
me.addCls(me.openedCls);
}
},
onChange: function () {
var me = this;
me.toggleCls(me.openedCls);
},
onElClick: function () {
//对值进行切换
var me = this,
currentValue = me.getValue(),
minValue = me.minValue,
maxValue = me.maxValue,
toggleValue = currentValue == minValue ? maxValue : minValue;
me.setValue(toggleValue);
//触发值的双向绑定
me.publishValue();
}
});
4，相关scss，content直接使用适用中文可能会产生乱码，可以改成中文对应的Unicode
//开关
.ux-uxSliderToggle {
.x-slider-horz {
&:before {
top: auto;
margin:;
height: 20px;
content: '关';
padding-left: 25px;
padding-top: 1px;
}
}
.x-slider:before {
border-radius: 8px;
}
.x-slider-thumb {
border-radius: 5px;
}
}
.ux-uxSliderToggle-toggled {
.x-slider-horz {
&:before {
content: '开';
padding-left: 10px;
background: green;
color: #fff;
}
}
}