ux.form.field.Password 密码与非密码状态切换

效果如图：

扩展源码：

 1 //扩展
 2 //密码按钮扩展
 3 //支持在密码与非密码之间切换
 4 Ext.define('ux.form.field.Password', {
 5     extend: 'Ext.form.field.Text',
 6     xtype: 'passFile',
 7     requires: ['Ext.form.trigger.Component'],
 8     //禁止自动填充
 9     autoComplete: 'off',
10     inputType: 'password',
11     //自定义样式
12     cls: 'password',
13     triggers: {
14         cutoverButton: {
15             type: 'component',
16             //只读时隐藏，此功能未测试
17             hideOnReadOnly: true,
18             preventMouseDown: false
19         }
20     },
21     /**
22  * @private 创建切换按钮
23  */
24     applyTriggers: function(triggers) {
25         var me = this,
26         triggerCfg = triggers.cutoverButton;
27         //增加切换按钮
28         if (triggerCfg) {
29             triggerCfg.component = Ext.apply({
30                 xtype: 'button',
31                 ownerCt: me,
32                 //加入小图标
33                 iconCls: 'x-fa fa-eye',
34                 id: me.id + '-triggerButton',
35                 ui: me.ui,
36                 listeners: {
37                     scope: me,
38                     click: me.onCutoverClick
39                 }
40             });
41             return me.callParent([triggers]);
42         }
43             // <debug>
44         else {
45             Ext.raise(me.$className + ' requires a valid trigger config containing "button" specification');
46         }
47         // </debug>
48     },
49     onCutoverClick: function(t) {
50         var type = 'password',
51         iconCls = 'x-fa fa-eye';
52         if (!t.isText) {
53             type = 'text';
54             iconCls = 'x-fa fa-lock';
55         }
56         t.isText = !t.isText;
57         //切换图标
58         t.setIconCls(iconCls);
59         //切换输入框类型
60         this.inputType = type;
61         this.inputEl.dom.type = type;
62     }
63 });
 1 /*#region 自定义密码控件*/
 2 .password {
 3     .x-form-trigger {
 4 
 5         .x-btn-default-small {
 6             border: 0;
 7             background: none !important;
 8 
 9             .x-btn-icon-el-default-small {
10                 color: black;
11             }
12         }
13     }
14 }
15 /*#endregion*/

 

posted @ 2017-09-12 11:02  魔狼再世  阅读(592)  评论(0)  编辑  收藏  举报