Extjs实现密码框密码的显示与隐藏

由于extjs好像不能更改文本框的type属性，所以无法动态改变type,实现的想法是同一位置摆放两个文本框，一个的inputType: 'password',另一个则为正常文本框。使用一个checkboxgroup去变更密码的显示与隐藏，当更改的时候显示框和密码框必须同步。实现效果图如下

      

代码如下

{
                    fieldLabel: '<font color=red>*</font>密码',
                    xtype: "textfield",
                    name: 'login_pwd_hide',
                    id: 'login_pwd_hide',
                    hidden:true,
                    maxLength: 20,
                    width: 245,
                    maxLengthText: '最大长度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: "显示密码",
                                name: 'showPass',
                                id: 'showPass',
                                xtype: "checkboxgroup",
                                labelWidth: 20,
                                width: 240,
                                labelAlign: 'right',
                                items: [
                                    { name: 'target', id:'passFlag',inputValue: '1', boxLabel: '显示密码', 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);
                                            }
                                        }

                                        );
                                    }
                                }
                            },

其中密码框的文本值为ajax动态请求后台页面生成的值

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

后台生成代码,只写怎么将string返回，生成随机密码代码就不写了

[WebMethod]
        public static string GetRandomValue()
        {
            //首先实例化验证码的类  
            *********************
            //生成验证码指定的长度  
            ****************
            return code;
        }