Ext.form.TextFieldでパスワードを表示/非表示にするには

Question

他のボタンをクリックすると、パスワードフィールドの入力テキストを表示/非表示にするソリューションを教えてください。私はそのテキストフィールドのinputTypeプロパティを変更しようとしましたが、その時にレンダリングされていたため、影響はありませんでした。別の方法は、2つのテキストフィールドを作成し、visbile/invisibleですが、私はこれをしたくありません。なぜなら、それは不正行為のように見えるからです... ありがとうございます。

Answer 1

この投稿は少し古いですが、とにかく答えると思っていました。たぶんそれは誰かを助けるでしょう。

DOMのアイテムがレンダリングされた後、そのタイプが「パスワード」に設定されていることは間違いありません。したがって、DOMを直接操作する必要があります。 1つのアイテム、FormPanelを持つウィンドウがあり、このFormPanelにテキストフィールドであるアイテムが1つあるとします。私は最初に設定したinpupType： 'password'を自分の設定オプションに設定しました。今私はそれを変更したい。ここで私はどうなるのかです：

this.get（0）.getForm（）を取得（1）.getEl（）私はこれがであると仮定= 'text' の

を（dom.type。

DOMを変更し、パスワードをすぐにテキストとして表示します。それをバックに変更するには：。。

this.getForm（）私は（インデックス）を取得使用することはありません現実の世界の状況では（1）.getEl（）dom.typeは= 'パスワード'

を得るが、テキストフィールドの名前を設定し、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() 
}); 

です