As it seems that extjs can't change the type attribute of text box, it can't change the type dynamically. The idea of implementation is to place two text boxes in the same position, one of which is inputType: 'password', and the other is normal text box. Use a checkboxgroup to change the display and hide of passwords. When changing, the display box and password box must be synchronized. The realization effect diagram is as follows
The code is as follows
{ fieldLabel: '<font color=red>*</font>Password', xtype: "textfield", name: 'login_pwd_hide', id: 'login_pwd_hide', hidden:true, maxLength: 20, width: 245, maxLengthText: 'Maximum length 20', listeners: { render: function (p) { p.getEl().on('blur', function (p) { var pass = Ext.getCmp('login_pwd_hide').getValue(); Ext.getCmp('login_pwd').setValue(pass); //Ext.getCmp('login_pwd2').setValue(pass); Ext.getCmp('login_pwd_hide').setValue(pass); }); } } }, { //fieldLabel: "display password", name: 'showPass', id: 'showPass', xtype: "checkboxgroup", labelWidth: 20, width: 240, labelAlign: 'right', items: [ { name: 'target', id:'passFlag',inputValue: '1', boxLabel: 'Show password', checked: false } ], listeners: { render: function (p) { p.getEl().on('click', function (p) { var flag = Ext.getCmp('passFlag').getValue(); //alert(flag); if (flag == true) { Ext.getCmp("login_pwd").setVisible(false); Ext.getCmp("login_pwd_hide").setVisible(true); } else { Ext.getCmp("login_pwd").setVisible(true); Ext.getCmp("login_pwd_hide").setVisible(false); } } ); } } },
Where the text value of the password box is the value generated by the ajax dynamic request background page
listeners: { render: function (p) { p.getEl().on('click', function (p) { $.ajax({ type: "post", contentType: "application/json; charset=utf-8", url: "UserMan.aspx/GetRandomValue", dataType: "json", success: function (data) { Ext.getCmp('login_pwd').setValue(data.d); Ext.getCmp('login_pwd2').setValue(data.d); Ext.getCmp('login_pwd_hide').setValue(data.d); }, error: function (err) { alert(err); } }); }); } }Generate the code in the background, only write how to return the string, and do not write the random password code
[WebMethod] public static string GetRandomValue() { //First instantiate the class of the verification code ********************* //Generate the length specified by the verification code **************** return code; }