1，在Ext 6.5.3的classic版中没有提供开关控件，参照modern版中 togglefield开关的实现，继承滑动器（sliderfield），自定义一个开关按钮。支持value绑定和点击切换状态以及表单提交。

2，完成后效果如图:

 

3， js代码如下：

//基于滑动器自定义开关控件, by xxxExt.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: 0;      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;    }  }}