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. bash 脚本编程七 将命令输出保存到变量中(转载)

    转自:http://blog.csdn.net/csfreebird/article/details/7978699 `符号包含的命令执行完后,可以讲其输出结果保存到变量中 #!/bin/bash v ...

  2. ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)(六)学生借阅/预约/查询书籍事务

    前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...

  3. Ubuntu 18.04 LTS 安装后 各种问题以及解决方案

    1. root的初始密码,默认是不知道的,需要进行设置 a. 进入终端自己的用户 b. 输入 sudo passwd回车 c. 输入新密码,回车,重复,回车,搞定 d. su 一下,就可以了 2.  ...

  4. Java笔记-序列化的注意点

    1.使用serialVersionUID 在Eclipse中,如果一个类实现了Serializable接口,且没有给这个类设置一个serialVersionUID,就会有一个警告标志: The ser ...

  5. ubuntu16.04里如何正确添加用root用户来登录图形界面(图文详解)

    不多说,直接上干货! Ubuntu版本都默认不允许使用root登录,必须要改配置文件. 第一步: 首先设置root密码,利用现有管理员帐户登陆Ubuntu,在终端执行命令:sudo passwd ro ...

  6. P1179 数字统计

    题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 2 在数 2 中出现了 1 次,在数 12 中出现 1 次,在数 20 中出 现 1 次 ...

  7. JavaScript星级评分,仿百度,增强版

    JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  8. 解决spring boot websocket

    在网上找的demo写了一个小例子,本地开发测试都很正常,但是部署在tomcat就各种坑 1.MyWebSocket不要用spring 注解标注 2.main方法对应的类继承SpringBootServ ...

  9. scrollTop、offsetTop、clientTop

    1.offsetTop: obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置. 2.clientTop: 这个返回的是元素周围边框的厚度, ...

  10. 通过HTML 取得页面、屏幕、浏览器的高度宽度

    一.介绍 1. 容器 一个页面的展示,从外到内的容器为:屏幕.浏览器以及页面本身. HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内. 通过Js的一些对象可以获取这些容器的高度.宽度 ...