Comment afficher/masquer le mot de passe dans Ext.form.TextField

Question

Pourriez-vous me montrer la solution pour que le texte du champ du mot de passe s'affiche ou se cache lorsque l'on clique sur un autre bouton ? J'ai essayé de modifier la propriété inputType de ce champ de texte, mais il était déjà rendu à ce moment-là et cela n'a pas eu d'effet. Un autre moyen est de créer 2 champs de texte et de les rendre visibles/invisibles, mais je n'aime pas faire cela, car cela ressemble à de la triche... Merci d'avance.

Answer 1

Ce message est un peu vieux, mais j'ai pensé que je devais y répondre quand même. Peut-être que cela aidera quelqu'un d'autre.

Vous avez raison de dire qu'après le rendu de l'élément, son type a été défini comme 'password' dans le DOM. Nous devons donc manipuler directement le DOM. Disons que ma fenêtre comporte un élément, un FormPanel, et que j'ai un élément dans ce FormPanel, un champ de texte. J'ai initialement défini son inpupType : 'password' dans mes options de configuration. Maintenant, je veux changer cela. Voici ce que je dois faire :

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

(Je suppose que c'est dans un gestionnaire d'événement qui a la portée de ma fenêtre)

Cela changera le DOM et montrera immédiatement mon mot de passe en tant que texte. Pour le changer à nouveau :

this.getForm().get(1).getEl().dom.type = 'password' (mot de passe)

Dans une situation réelle, je n'utiliserais pas get(index), mais je définirais un nom pour le champ de texte et j'utiliserais find, ou je créerais une var qui pointe vers le champ de texte.

J'espère que cela aidera quelqu'un.

Ricky

Answer 2

Oui, je suis aussi tombé sur ce sujet. Après avoir creusé dans le web, je me suis senti mal car il n'y a pas de moyen intégré de faire cela dans le framework ext, bien que ce soit devenu une exigence plus courante aujourd'hui.

Avec l'aide des suggestions d'autres personnes, j'ai mis en œuvre celle ci-dessous.

Le violon est ici 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()
});