extjs changer le type de cellule de la grille sur rowclick listener

Question

Je travaille sur le panneau de grille extjs qui a 3 colonnes utilisateur, email, mot de passe. Lors d'un événement rowclick, je souhaite déchiffrer le mot de passe. J'essaye ceci en mettant un type à «texte» dans la colonne de champ de configuration de mot de passe.

Mais je ne suis pas capable de voir le mot de passe décrypté.

Veuillez me suggérer la solution.

Merci d'avance.

Ext.create('Ext.data.Store', { 
     storeId: 'simpsonsStore', 
     fields: ['name', 'email', 'phone'], 
     data: [{ 
      "name": "Lisa", 
      "email": "lisa@simpsons.com", 
      "pass": "555-111-1224" 
     }, { 
      "name": "Bart", 
      "email": "bart@simpsons.com", 
      "pass": "555--1234" 
     }, { 
      "name": "Homer", 
      "email": "homer@simpsons.com", 
      "pass": "-222-1244" 
     }, { 
      "name": "Marge", 
      "email": "marge@simpsons.com", 
      "pass": "111-1254" 
     }] 
    }); 

    Ext.create('Ext.grid.Panel', { 
     title: 'Simpsons', 
     store: Ext.data.StoreManager.lookup('simpsonsStore'), 
     listeners: { 
      rowclick: function (grid, record, e) { 
       var _this = this; 
       showPass('text'); 
       function showPass(val) { 
        _this.getEl().component.columns[2].setConfig('type', "text"); 
       } 
       } 
      }, 
     columns: [{ 
      header: 'Name', 
      dataIndex: 'name', 
      editor: 'textfield' 
     }, { 
      header: 'Email', 
      dataIndex: 'email', 
      flex: 1 
     }, { 
      header: "Password", 
      dataIndex: 'pass', 
      inputType: 'password', 
      renderer: function(val) { 
       var toReturn = ""; 
       for (var x = 0; x < val.length; x++) { 
        toReturn += "&#x25cf;"; 
       } 

       return toReturn; 
      } 
     }], 
     selType: 'rowmodel', 
     height: 200, 
     width: 400, 
     renderTo: Ext.getBody() 
    }); 

Answer 1

Dans la grille ExtJs vous pouvez utiliser widgetcolumn lui fournir config ajouter xtype intérieur widgetcolumn. Vous pouvez vous référer ExtJs widgetcolumn docs

J'ai créé une petite démo pour vous montrer comment ça marche. Sencha fiddle example

Espérons que cela va vous aider.

Ext.create('Ext.data.Store', { 
    storeId: 'simpsonsStore', 
    fields: ['name', 'email', 'phone'], 
    data: [{ 
     "name": "Lisa", 
     "email": "lisa@simpsons.com", 
     "pass": "555-111-1224" 
    }, { 
     "name": "Bart", 
     "email": "bart@simpsons.com", 
     "pass": "555--1234" 
    }, { 
     "name": "Homer", 
     "email": "homer@simpsons.com", 
     "pass": "-222-1244" 
    }, { 
     "name": "Marge", 
     "email": "marge@simpsons.com", 
     "pass": "111-1254" 
    }] 
}); 

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    listeners: { 
     select: function (grid, record, index) { 
      this.doChangeInputType(this.query('#password')[index]); 
     }, 
     deselect: function (grid, record, index) { 
      this.doChangeInputType(this.query('#password')[index]); 
     }, 
     rowclick: function (grid, record, element, rowIndex, e, eOpts) { 
      this.getSelectionModel().select(record) 
     } 
    }, 
    columns: [{ 
     header: 'Name', 
     dataIndex: 'name', 
     editor: 'textfield' 
    }, { 
     header: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     header: "Password", 
     flex: 1, 
     dataIndex: 'pass', 
     xtype: 'widgetcolumn', 
     widget: { 
      xtype: 'textfield', 
      itemId: 'password', 
      inputType: 'password', 
      readOnly: true 
     } 
    }], 
    selType: 'rowmodel', 
    height: 300, 
    width: '100%', 
    renderTo: Ext.getBody(), 
    doChangeInputType: function (passwordField) { 
     var inputDom = Ext.get(passwordField.getInputId()).dom, 
      type = inputDom.type; 
     inputDom.type = type == "text" ? 'password' : 'text'; 
    } 
}); 

Answer 2

Avoir une formation en sécurité, je ne peux pas penser à une situation où il est valable d'avoir des mots de passe déchiffré affichés dans une interface graphique pour les utilisateurs finaux.