extjs完美实现“密码框显示提示文字，不显示输入文字”的变态需求！！！

先看下需求：“密码框显示提示文字，不显示输入文字”

1、正常状态下：

2、密码框输入密码时：

3、密码框有值的时候，失去鼠标焦点的状态：

4、密码框值为空的时候，失去鼠标焦点的状态：

实现代码：

    username:{
        cls: "text_field username",
        inputType: 'text',
        width: 326,
        height: 60,
        emptyText: '账户',
        emptyClass:"usernameEmpty",
        focusClass:"usernameSelect",
        margins:"30 58 0 58",

        listeners: {

        }
    },
    password:{
        cls: "text_field password",
        inputType: 'text',
        width: 326,
        height: 60,
        emptyText: '密码',
        emptyClass:"usernameEmpty",
        focusClass:"passwordSelect",
        margins:"30 58 0 58",
        enableKeyEvents: true,
        listeners: {
            keypress: function (field, e) {
                if (e.getKey() == 13) {
                    Ext.getCmp("loginBtn").el.dom.click();
                }
            },
            focus: function(){
                document.getElementById('password').type = "password";
            },
            change: function(){
                if (this.getValue() !== ""){
                    document.getElementById('password').type = "password";
                } else {
                    document.getElementById('password').type = "text"; 
                }
            }
        }
    },

关键代码：

listeners:{

           focus: function(){
                document.getElementById('password').type = "password";
            },
            change: function(){
                if (this.getValue() !== ""){
                    document.getElementById('password').type = "password";
                } else {
                    document.getElementById('password').type = "text"; 
                }
            }

}

解释一下：

1、 通过监听输入框的 focus 和 change 这两个事件，分别对输入框获得焦点和输入值这两种情况来改变输入框的类型。

2、那么怎么修改输入框的类型呢？尝试了一下 this.inputType = "password"  然并卵，最终只有这样才行：

 document.getElementById('password').type = "你想要的类型";