Как показать / скрыть пароль в Ext.form.TextField - PullRequest
Новая
       23

Как показать / скрыть пароль в Ext.form.TextField

4 голосов
/ 18 января 2011

не могли бы вы показать мне решение, которое бы отображало / скрывало текст ввода поля пароля при нажатии другой кнопки ?!Я пытался изменить свойство inputType этого текстового поля, но оно было визуализировано в то время, чтобы оно не влияло.Другой способ - создать 2 текстовых поля и сделать их видимыми / невидимыми, но мне не нравится это делать, потому что это похоже на читерство ... Заранее спасибо.

Ответы [ 2 ]

8 голосов
/ 19 февраля 2011

Ну, этот пост немного старый, но я все равно решил ответить на него.Возможно, это поможет кому-то еще.

Вы правы, что после рендеринга элемента его тип был установлен на «пароль» в DOM.Таким образом, нам нужно напрямую манипулировать DOM.Допустим, у меня есть окно с 1 элементом, FormPanel, и у меня есть 1 элемент в этой 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, либо я бы создал переменную, указывающую на текстовое поле.

Надеюсь, это кому-нибудь поможет.

Ricky

1 голос
/ 25 августа 2017

Да, я тоже наткнулся на это.После копания в сети я почувствовал себя плохо, поскольку в ext 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()
});
...