效果如图:

扩展源码:

 //扩展
//密码按钮扩展
//支持在密码与非密码之间切换
Ext.define('ux.form.field.Password', {
extend: 'Ext.form.field.Text',
xtype: 'passFile',
requires: ['Ext.form.trigger.Component'],
//禁止自动填充
autoComplete: 'off',
inputType: 'password',
//自定义样式
cls: 'password',
triggers: {
cutoverButton: {
type: 'component',
//只读时隐藏,此功能未测试
hideOnReadOnly: true,
preventMouseDown: false
}
},
/**
* @private 创建切换按钮
*/
applyTriggers: function(triggers) {
var me = this,
triggerCfg = triggers.cutoverButton;
//增加切换按钮
if (triggerCfg) {
triggerCfg.component = Ext.apply({
xtype: 'button',
ownerCt: me,
//加入小图标
iconCls: 'x-fa fa-eye',
id: me.id + '-triggerButton',
ui: me.ui,
listeners: {
scope: me,
click: me.onCutoverClick
}
});
return me.callParent([triggers]);
}
// <debug>
else {
Ext.raise(me.$className + ' requires a valid trigger config containing "button" specification');
}
// </debug>
},
onCutoverClick: function(t) {
var type = 'password',
iconCls = 'x-fa fa-eye';
if (!t.isText) {
type = 'text';
iconCls = 'x-fa fa-lock';
}
t.isText = !t.isText;
//切换图标
t.setIconCls(iconCls);
//切换输入框类型
this.inputType = type;
this.inputEl.dom.type = type;
}
});
 /*#region 自定义密码控件*/
.password {
.x-form-trigger { .x-btn-default-small {
border:;
background: none !important; .x-btn-icon-el-default-small {
color: black;
}
}
}
}
/*#endregion*/

ux.form.field.Password 密码与非密码状态切换的更多相关文章

  1. ux.form.field.KindEditor 所见所得编辑器

    注意需要引入KindEditor相关资源 //所见所得编辑器 Ext.define('ux.form.field.KindEditor', { extend: 'Ext.form.field.Text ...

  2. ux.form.field.Verify 验证码控件

    //验证码控件 Ext.define('ux.form.field.Verify', { extend: 'Ext.container.Container', alias: ['widget.fiel ...

  3. ux.form.field.TreePicker 扩展,修复火狐不能展开bug

    /** * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes. * 动态 ...

  4. ux.form.field.SearchField 列表、树形菜单查询扩展

    //支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: ' ...

  5. ux.form.field.Year 只能选年的时间扩展

    效果如图,亲测6.2.1版本可用,用法同时间选择控件 //只选择年的控件 Ext.define('ux.picker.Year', { extend: 'Ext.Component', alias: ...

  6. ux.form.field.Month 只能选年、月的时间扩展

    效果如图,亲测6.2.1版本可用,用法同时间选择控件 //月弹窗扩展 //只选月 Ext.define('ux.picker.Month', { extend: 'Ext.picker.Month', ...

  7. ux.form.field.GridDate 支持快速选择日期的日期控件

    效果如图,亲测6.2.1版本可用 /** *支持快速选择日期的日期控件 */ Ext.define('ux.form.field.GridDate', { extend: 'Ext.form.fiel ...

  8. 如何在主Form出现之前,弹出密码验证From,Cancel就退出程序,Ok后密码正确才出现主Form

    如何在主Form出现之前,弹出密码验证From,Cancel就退出程序,Ok后密码正确才出现主Form本文地址 :CodeGo.net/5175478/ ----------------------- ...

  9. mysql5.7 mysql库下面的user表没有password字段无法修改密码

    如题所述,mysql5.7  mysql库下面的user表没有password字段无法修改密码, 5.7版本已经不再使用password来作为密码的字段了  而改成了authentication_st ...

随机推荐

  1. es6新增的数组遍历方式

    1.some方法 1)some() 方法测试是否至少有一个元素通过由提供的函数实现的测试. 2)参数列表: arr.some(callback(element[, index[, array]])[, ...

  2. JSAP103

    JSAP103 1.节点 1)定义:不是元素,节点是页面中的所有内容(标签,属性,文本),Node.它使得任何标签中的元素获取都十分方便 2)节点的相关属性 可以使用标签即元素点出来,可以使用属性节点 ...

  3. Canvas 和 SVG 的不同

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  4. 9 月份 GitHub 上最火的 JavaScript 开源项目!

    推荐 GitHub 上9 月份最受欢迎的 10 个 JavaScript 开源项目,在这些项目中,你有在用或用过哪些呢? 1.基于 Promise 的 HTTP 客户端 Axios https://g ...

  5. 转发:entos7修改文件夹权限和用户名用户组

    Linux系统下经常遇到文件或者文件夹的权限问题,或者是因为文件夹所属的用户问题而没有访问的权限.根据我自己遇到的情况,对这类问题做一个小结.在命令行使用命令“ll”或者“ls -a”,可以查看文件或 ...

  6. Django 用户登陆访问限制 @login_required

    #用户登陆访问限制 from django.http import HttpResponseRedirect #只有登录了才能看到页面 #设置方法一:指定特定管理员才能访问 def main(requ ...

  7. Docker在windows下的使用【二】

    可参考学习地址: 极客学院docker教程,还不错,可以参考 1.Dockerhub下载镜像 下载地址:Dockerhub地址 有两种方式可以获得新的镜像 直接从dockerhub下载编译好的imag ...

  8. 单片机成长之路(51基础篇) - 004 STC89C52MCU 软件实现系统复位

    用户应用程序在运行过程中,有时会有特殊需求,需要实现单片机系统复位(热启动之一),传统的8051单片机由于硬件上未支持此功能,用户必须用软件模拟实现,实现起来较麻烦.STC单片机增加了相应的硬件功能, ...

  9. Mybatis中自定义映射xml参数传递使用

    在使用mybatis框架时,大多时候自动生成的mapper.xml文件能满足我们所需的数据库操作,但一些情况下还是需要我们自己写sql:为了加深印象,总结了下参数传递的方式以及各个关键字的含义如下: ...

  10. Effective Java 第三版——67. 明智谨慎地进行优化

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...