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

Question

您能否告诉我在单击另一个按钮时使密码字段的输入文本显示/隐藏的解决方案？！我试图更改该文本字段的 inputType 属性，但它是在当时呈现的，所以它没有影响。另一种方法是创建 2 个文本字段并使其可见/不可见，但我不喜欢这样做，因为它看起来像作弊...... 提前致谢。

Answer 1

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

您是正确的，在渲染项目后，它的类型已在 DOM 中设置为“密码”。因此我们需要直接操作 DOM。假设我的窗口有 1 个项目，一个 FormPanel，我在这个 FormPanel 中有 1 个项目，一个文本字段。我最初在我的配置选项中将其设置为 inpupType: 'password'。现在我想改变它。这是我会做的：

this.get(0).getForm().get(1).getEl().dom.type = 'text'

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

这将更改 DOM 并立即将我的密码显示为文本。要改回来：

this.getForm().get(1).getEl().dom.type = '密码'

在现实世界的情况下，我不会使用 get(index)，而是为文本字段设置名称并使用 find，或者我会创建一个指向文本字段的 var。

希望这对某人有所帮助。

瑞奇

Answer 2

是的，我也偶然发现了这一点。在网上挖掘之后，我感觉很糟糕，因为在 ext 框架中没有内置的方法可以做到这一点，尽管现在它变得更普遍了。

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

小提琴在这里https://fiddle.sencha.com/#view/editor&fiddle/25m2

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