如何在 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 = 'password'

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

希望这对某人有帮助。

瑞奇

Answer 2

是的，我也偶然发现了这一点。在深入研究网络之后，我感觉很糟糕，因为在 ext 框架中没有内置的方法可以做到这一点，尽管现在它已成为更常见的要求。

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

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

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