Passwords 如何在Ext.form.TextField中显示/隐藏密码

你能告诉我在点击另一个按钮时显示/隐藏密码字段输入文本的解决方案吗？！我试图更改该文本字段的inputType属性，但它是在当时呈现的，因此不会影响。另一种方法是创建两个文本字段，并使它们可见/不可见，但我不喜欢这样做，因为这看起来像作弊。。。

---

提前谢谢。

这篇文章有点老了，但我想我还是会回答的。也许它会帮助其他人

在呈现项之后，它的类型在DOM中被设置为“password”，这是正确的。因此，我们需要直接管理DOM。假设我的窗口有一个项目，一个FormPanel，我在这个FormPanel中有一个项目，一个textfield。我最初在配置选项中将其设置为inpupType:“password”。现在我想改变这一点。下面是我要做的：

this.get（0.getForm（）.get（1.getEl（）.dom.type='text'

（我假设这是在具有我的窗口范围的事件处理程序中）

这将更改DOM并立即以文本形式显示我的密码。要将其更改回：

this.getForm（）.get（1.getEl（）.dom.type='password'

在现实世界中，我不会使用get（index），而是为textfield设置一个名称并使用find，或者创建一个指向textfield的var

希望这对别人有帮助

---

瑞奇

是的，我也偶然发现了这一点。在挖掘web之后，我感觉很糟糕，因为在ext框架中没有内置的方法来实现这一点，尽管它现在已经成为更常见的需求

在其他人的帮助下，我实施了以下建议

提琴来了

---

嘿，谢谢你-你可以使用触发器字段。根据你的帖子，我明天会试一试。

Ext.tip.QuickTipManager.init();

Ext.create('Ext.form.Panel', {
    items: {
        xtype: 'fieldcontainer',

        layout: 'hbox',

        items: [{
            xtype: 'textfield',
            fieldLabel: 'Password',
            inputType: 'password',
            width: 300,
        }, {
            xtype: 'button',
            iconCls: 'fa fa-eye',
            tooltip: 'Show password',
            handler: function (button) {

                var isShowPassword = this.iconCls === 'fa fa-eye';

                this.setTooltip(isShowPassword ? 'Hide password' : 'Show password');

                this.setIconCls(isShowPassword ? 'fa fa-eye-slash' : 'fa fa-eye');

                this.prev().getEl().query('input', false)[0].set({
                    'type': isShowPassword ? 'text' : 'password'
                })
            }
        }]
    },

    renderTo: Ext.getBody()
});