Ext 6.5.3 classic版本,自定义实现togglefield开关控件
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:;
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开关控件的更多相关文章
- 自定义仿 IPhone 开关控件
极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...
- 获取 AlertDialog自定义的布局 的控件
AlertDialog自定义的布局 效果图: 创建dialog方法的代码如下: 1 LayoutInflater inflater = getLayoutInflater(); 2 View layo ...
- 使用VideoView自定义一个播放器控件
介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actv ...
- android - 自定义(组合)控件 + 自定义控件外观
转载:http://www.cnblogs.com/bill-joy/archive/2012/04/26/2471831.html android - 自定义(组合)控件 + 自定义控件外观 A ...
- Android创建自定义的布局和控件
Android的自带布局有framelayout.linerlayout.relativelayout,外加两个百分比布局,但是这些无法灵活的满足我们的需要,所以我们要自己自定义并引入自己的布局.首先 ...
- asp.net读取用户控件,自定义加载用户控件
1.自定义加载用户控件 ceshi.aspx页面 <html> <body> <div id="divControls" runat="se ...
- WPF自定义LED风格数字显示控件
原文:WPF自定义LED风格数字显示控件 版权声明:本文为博主原创文章,转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/de ...
- 【C#】wpf自定义calendar日期选择控件的样式
原文:[C#]wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图,看下样式 原理 ...
- ExtJS基础知识总结:自定义日历和ComboBox控件(二)
概述 1.ExtJS 5不支持日期选择框中只选择年月,为了满足ExtJs5可以实现选择年月的功能,查询网上资料,整理出来了相应的处理方式,最终实现的效果如下图: 2.ExtJS 控件丰富,如果需要实现 ...
随机推荐
- Linux ubuntu 下寻找 texlive 缺失包 texlive 缺失包(转载)
转自:http://blog.sina.com.cn/s/blog_87315ca60101d4d1.html 在Linux下用 latex 编译 ××.tex 文件有时候时会提示: ! LaTeX ...
- vector理解一波~~~
Vector: 头文件: #include<vector> using namespacestd; 定义: vector<类型>q;//类同于 "类型 q[];&q ...
- c# KeyDown KeyPress 函数中event 的 Handled属性
很奇怪的 KeyDown中的 Handled.true 只能使 Keys.Back 这类失效, 如果要使比如数字失效,必须设置一个变量 _bHandled = true 然后在紧接着会触发的 KeyP ...
- bzoj 3676: [Apio2014]回文串【回文自动机】
回文自动机板子 或者是SAM+manacher+倍增,就是manacher求本质不同回文串(让f++的串),然后在SAM倍增查询对应点出现次数 #include<iostream> #in ...
- 「软件」仿站小工具v9.0
仿站小工具是通过网址下载静态网页的工具.从输入的网址下载html代码,提取出JS.Css.Image.Picture.Flash等静态文件网址,再从下载完好的Css代码中提取出Image静态文件网址, ...
- springMVC validator验证的使用
http://blog.csdn.net/miketom155/article/details/45058195 1. 实现Validator接口,对数据进行校验 @RequestMapping(va ...
- Oracle 正则化
摘抄自:http://www.cnblogs.com/scottckt/archive/2012/10/11/2719562.html ORACLE中的支持正则表达式的函数主要有下面四个: 1,REG ...
- [WOJ2549]逻辑的连通性
题目描述: 数学中,假如有命题 p 一定能推出命题 q,则称 p 是 q 的充分条件,q 是 p 的必要 条件. 特别的,当 p 既是 q 的充分条件,又是 q 的必要条件时,称 p 和 q 互为 充 ...
- 暴力 Codeforces Round #305 (Div. 2) B. Mike and Fun
题目传送门 /* 暴力:每次更新该行的num[],然后暴力找出最优解就可以了:) */ #include <cstdio> #include <cstring> #includ ...
- 使用预定义的action值启动系统应用
1.启动浏览器 Intent intent = new Intent(); intent.setAction(Intent.ACTION_WEB_SEARCH); //可以传一个搜索关键字,会直接显示 ...