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

Ext 6.5.3 classic版本,自定义实现togglefield开关控件的更多相关文章

  1. 自定义仿 IPhone 开关控件

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  2. 获取 AlertDialog自定义的布局 的控件

    AlertDialog自定义的布局 效果图: 创建dialog方法的代码如下: 1 LayoutInflater inflater = getLayoutInflater(); 2 View layo ...

  3. 使用VideoView自定义一个播放器控件

    介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...

  4. android - 自定义(组合)控件 + 自定义控件外观

    转载:http://www.cnblogs.com/bill-joy/archive/2012/04/26/2471831.html android - 自定义(组合)控件 + 自定义控件外观   A ...

  5. Android创建自定义的布局和控件

    Android的自带布局有framelayout.linerlayout.relativelayout,外加两个百分比布局,但是这些无法灵活的满足我们的需要,所以我们要自己自定义并引入自己的布局.首先 ...

  6. asp.net读取用户控件,自定义加载用户控件

    1.自定义加载用户控件 ceshi.aspx页面 <html> <body> <div id="divControls" runat="se ...

  7. WPF自定义LED风格数字显示控件

    原文:WPF自定义LED风格数字显示控件 版权声明:本文为博主原创文章,转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/de ...

  8. 【C#】wpf自定义calendar日期选择控件的样式

    原文:[C#]wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图,看下样式 原理 ...

  9. ExtJS基础知识总结:自定义日历和ComboBox控件(二)

    概述 1.ExtJS 5不支持日期选择框中只选择年月,为了满足ExtJs5可以实现选择年月的功能,查询网上资料,整理出来了相应的处理方式,最终实现的效果如下图: 2.ExtJS 控件丰富,如果需要实现 ...

随机推荐

  1. 洛谷 - P1217 - 回文质数 - 枚举

    https://www.luogu.org/problemnew/show/P1217 考虑暴力生成所有的回文数然后再判断是不是质数.注意个位的选择实际上只有4种.所以是 $4*10^3*10^3=4 ...

  2. (水题)洛谷 - P2089 - 烤鸡

    https://www.luogu.org/problemnew/show/P2089 非常暴力的dfs,不知道不剪枝会怎么样,但是其实最多也就 $3^{10}$ ,大不到哪里去.还有一个细节就是大于 ...

  3. 【Tip】JavaScript

    『JavaScript』 『引用网络资源』 JQuery <script src="http://code.jquery.com/jquery-latest.js">& ...

  4. noip 2012 Day2 T2 借教室

    一.暴力简述 甩链接.jpeg 首先我们不难看出,这道题————并不是一道多难的题,因为显然,第一眼看题目时便很容易地想到暴力如何打:枚举每一种订单,然后针对每一种订单,对区间内的每一天进行修改(做减 ...

  5. 大数据系列文章-Hadoop的HDFS读写流程(二)

    在介绍HDFS读写流程时,先介绍下Block副本放置策略. Block副本放置策略 第一个副本:放置在上传文件的DataNode:如果是集群外提交,则随机挑选一台磁盘不太满,CPU不太忙的节点. 第二 ...

  6. TensorFlow图像预处理完整样例

    参考书 <TensorFlow:实战Google深度学习框架>(第2版) 以下TensorFlow程序完成了从图像片段截取,到图像大小调整再到图像翻转及色彩调整的整个图像预处理过程. #! ...

  7. HDU 6183 Color it(动态开点线段树)

    题目原网址:http://acm.hdu.edu.cn/showproblem.php?pid=6183 题目中文翻译: Time Limit: 20000/10000 MS (Java/Others ...

  8. Qt容器类之三:通用算法

    在<QtAlgorithm>头文件中,Qt提供了一些全局的模板函数,这些函数是可以使用在容器上的十分常用的算法.我们可以在任何提供了STL风格迭代器的容器类上用这些算法,包括QList.Q ...

  9. Qt容器类之一:Qt的容器类介绍

    一.介绍 Qt库提供了一套通用的基于模板的容器类,可以用这些类存储指定类型的项.比如,你需要一个大小可变的QString的数组,则使用QVector<QString>. 这些容器类比STL ...

  10. Elipse 无法启动问题(转)

    来源: <http://www.cnblogs.com/coding-way/archive/2012/10/17/2727481.html> 当选择完workspace之后,eclips ...