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*/