ExtJS在RowClick Listorer上更改网格单元格

Question

我正在使用具有3列用户，电子邮件，密码的Extjs网格面板。在RowClick事件中，我想解密密码。我正在通过在密码字段列的配置中设置一个类型来尝试此类型。

但我看不到解密的密码。

请建议我解决方案。

预先感谢。

    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: [{
            "name": "Lisa",
            "email": "[e-mail]",
            "pass": "555-111-1224"
        }, {
            "name": "Bart",
            "email": "[e-mail]",
            "pass": "555--1234"
        }, {
            "name": "Homer",
            "email": "[e-mail]",
            "pass": "-222-1244"
        }, {
            "name": "Marge",
            "email": "[e-mail]",
            "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

在Extjs网格中您可以使用 widgetColumn 它在widgetColumn内提供了配置来添加 XTYPE 。您可以参考extjs widgetcolumn文档

我创建了小型演示来向您展示，它是如何工作的。Sencha小提琴示例

希望它对您有帮助。

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        "name": "Lisa",
        "email": "[e-mail]",
        "pass": "555-111-1224"
    }, {
        "name": "Bart",
        "email": "[e-mail]",
        "pass": "555--1234"
    }, {
        "name": "Homer",
        "email": "[e-mail]",
        "pass": "-222-1244"
    }, {
        "name": "Marge",
        "email": "[e-mail]",
        "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

具有安全性背景，我无法想到一种情况，即在GUI中显示的密码对最终用户有效。