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

原文地址:https://www.cnblogs.com/yipinGG-8/p/10045890.html

时间: 2024-10-09 23:07:40

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

自定义三档半圆开关控件

项目中需要一个多档的开关,根据美工的做图来开,可能得用自定义控件来实现,正好之前学习做了一个卫星菜单自定义控件,打算尝试自己自定义这个半圆控件. 美工图如下: 1.考虑自定义控件所需属性 根据美工图来看,我觉得需要三个属性,开关所处于档位level(说是3档),指示器颜色indicatorColor,内圆半径radius 于是在values文件夹下新建attrs.xml文件,内容如下 <?xml version="1.0" encoding="utf-8"?&

自定义下拉刷新控件

一.功能效果 1.在很多app中,在信息展示页面,当我们向下拖拽时,页面会加载最新的数据,并有一个短暂的提示控件出现,有些会有加载进度条,有些会记录加载日期.条目,有些还带有加载动画.其基本实现原理都相仿,本文中将探讨其实现原理,并封装出一个简单的下拉刷新控件 2.自定义刷新工具简单的示例 二.系统提供的下拉刷新工具 1.iOS6.0以后系统提供了自己的下拉刷新的控件:UIRefreshControl .例如,refreshControl,作为UITableViewController中的一个属

自定义快速查找字母控件

效果图如下: 首先看看布局文件,自定义的控件中包含一个 ListView,用于显示具体的数据内容: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     a

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

AlertDialog自定义的布局 效果图: 创建dialog方法的代码如下: 1 LayoutInflater inflater = getLayoutInflater(); 2 View layout = inflater.inflate(R.layout.dialog, 3 (ViewGroup) findViewById(R.id.dialog)); 4 new AlertDialog.Builder(this).setTitle("自定义布局").setView(layout

关于UITableView选中效果以及自定义cell上的控件响应事件

tableView默认的点击效果是:点击cell:A,出现点击效果,点另一个cell:B的时候,A的点击效果才会消失. 1.对于tableView,比较常用的效果,是点击表格行,出现效果,点击完毕,效果消失 那么就要在代码里做一些设置.代码如下: -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath

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

介绍 最近要使用播放器做一个简单的视频播放功能,开始学习VideoView,在横竖屏切换的时候碰到了点麻烦,不过在查阅资料后总算是解决了.在写VideoView播放视频时候定义控制的代码全写在Actvity里了,写完一看我靠代码好乱,于是就写了个自定义的播放器控件,支持指定大小,可以横竖屏切换,手动左右滑动快进快退.好了,下面开始. 效果图 效果图有点卡,我也不知道为啥..... VideoView介绍 这个是我们实现视频播放最主要的控件,详细的介绍大家百度就去看,这里介绍几个常用的方法. 用于

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

转载:http://www.cnblogs.com/bill-joy/archive/2012/04/26/2471831.html android - 自定义(组合)控件 + 自定义控件外观 Android自定义View实现很简单 继承View,重写构造函数.onDraw,(onMeasure)等函数. 如果自定义的View需要有自定义的属性,需要在values下建立attrs.xml.在其中定义你的属性. 在使用到自定义View的xml布局文件中需要加入xmlns:前缀="http://sc

Android 自定义SwitchButton开关控件

SwitchButton开关控件早已经非常流行.有各种各样的样式,SwitchButton开关控件一般用于app软件设置那里,控制缓存.声音.提示.下载等等.是具有很好的UI体验以及用户的习惯性.那么再下面介绍一个SwitchButton开关控件.并附上源码. 源码下载:点击 一.看实现的效果图 二.自定义SwitchButton 这是一个继承CheckBox的SwitchButton类.来实现做这些动画效果的,首先准备好这些图片,然后canvas绘制控件 的边框.背景.以及按钮.绘制时候加上相

自定义数字加减控件

1_自定义数字加减控件的要求 创建Module -NumberAddSubView A_输入的只能是数字,而且不能通过键盘输入 B_通过加减按钮操作数字 C_监听加减按钮 D_数组有最小值和最大值的限制 E_自定义属性 2.提供接口,让外界监听到数字的变化 1_设置接口 @Override public void onClick(View v) { if (v.getId() == R.id.btn_sub) { //Toast.makeText(mContext,"减",Toast.