Question

我正在使用extjs Grid面板，它有3列用户，电子邮件，密码。在rowclick事件上，我想解密密码。我通过在密码字段列的配置中将类型设置为“文本”来尝试此操作。

但我无法看到解密的密码。

请建议我解决方案。

提前致谢。

    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

在ExtJs网格中，您可以使用 widgetcolumn 它提供配置，在widget列中添加 xtype 。您可以参考ExtJs widgetcolumn docs

我已经创建了一个小型演示来向您展示它是如何工作的。 Sencha fiddle example

希望它会对你有所帮助。

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

具有安全性的背景我无法想到在GUI中向最终用户显示解密密码的情况。

extjs在rowclick侦听器上更改网格单元格类型

2 个答案: