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);
    }
});

 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;
    }
  }
}