extjs ändern Gitter Zellentyp auf rowclick Listener

Question

Ich arbeite auf extjs Grid-Panel, das 3 Spalten Benutzer, E-Mail, Passwort hat. Bei rowclick -Ereignis möchte ich das Passwort entschlüsseln. Ich versuche das, indem ich einen Typ auf 'Text' in der Config der Passwortfeldspalte einstelle.

Aber ich kann das entschlüsselte Passwort nicht sehen.

Bitte schlagen Sie mir die Lösung vor.

Vielen Dank im Voraus.

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

In ExtJs Gitter können Sie widgetcolumn verwenden es Config xtype innerhalb widgetcolumn hinzuzufügen bieten. Sie können beziehen ExtJs widgetcolumn docs

Ich habe kleine Demo erstellen, um Ihnen zu zeigen, wie es funktioniert. Sencha fiddle example

Ich hoffe, es wird Ihnen helfen.

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

einen Hintergrund in der Sicherheit Nachdem ich nicht von einer Situation denken kann, wo es gültig ist, um Passwörter in einer GUI angezeigt haben entschlüsselt Benutzer zu beenden.