Question

你可以告诉我解决方法，在点击另一个按钮时让密码字段的输入文字显示/隐藏吗？！我试图更改该文本字段的inputType属性，但它在那时被渲染，所以它没有影响。另一种方法是创建2个文本域和visbile / invisible它们，但我不喜欢这样做，因为它看起来像作弊...... 提前谢谢。

Answer 1

这篇文章有点老了，但我还以为我会回答它。也许它会帮助别人。

你是正确的，在渲染项目后，它的类型已在DOM中设置为'password'。因此我们需要直接操纵DOM。假设我的窗口有1个项目，一个FormPanel，我在这个FormPanel中有一个项目，一个文本字段。我最初在我的配置选项中设置了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/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()
});

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

2 个答案: