javascript - EXT JS 通过列渲染器获取选择的 ID

Question

使用 ExtJS 4.2.3，我有带有附件列表的网格面板。网格面板具有单元格单击监听器，它在选择单元格后开始下载文件。需要重新制作列渲染器中图像点击的代码(列名称“保存”)

带有单元格点击的当前代码示例:

 FileGrid = new Ext.grid.Panel({
            renderTo: "EXT-CONTENT",
            width: 500,
            height: 600,
            listeners: {
                cellclick: function (table, td, cellIndex, record, tr, rowIndex, e) {
                    var url = 'http://.../Attachment/Get?document_GUID=' + record.get("document_GUID");
                    console.log(url);
                    window.location = url;
                }
            },

带有“保存”列的代码，我需要通过列渲染器重现 cellclick 函数:

                },
                columns: {
                    defaults: { filter: true },
                    items: [
                            {
                                text: 'Attachname', dataIndex: 'attachment_fileName', width: 395, cellWrap: true,

                            },
                            {
                                text: 'Save', width: 100, align: 'center', sortable: false, menuDisabled: true, cellWrap: true,
                                renderer: function (val) {

                                    return '<a href="http://.../Attachment/Get?document" onclick="????">' + "<img src='/APPLICATION/Images/Save24.gif'/>" +
                                        '</a>';

                                }
                            },                                

                    ]
                },
                store: Ext.data.StoreManager.lookup('FileStore')
            });

Answer 1

您需要使用actioncolumn为此。

在此FIDDLE ，我已经使用您的代码创建了一个演示并进行了修改。我希望这将帮助或指导您实现您的要求。

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', 'document_GUID'],
    data: {
        'items': [{
            'name': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224",
            "document_GUID": 123
        }, {
            'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234",
            "document_GUID": 124
        }, {
            'name': 'Homer',
            "email": "homer@simpsons.com",
            "phone": "555-222-1244",
            "document_GUID": 125
        }, {
            'name': 'Marge',
            "email": "marge@simpsons.com",
            "phone": "555-222-1254",
            "document_GUID": 126
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        xtype: 'actioncolumn',
        width: 50,
        text: 'Save',
        items: [{
            icon: 'https://image.flaticon.com/icons/svg/69/69656.svg', // Use a URL in the icon config
            itemId: 'save',
            handler: function (grid, rowIndex, colIndex) {
                var rec = grid.getStore().getAt(rowIndex);
                var url = 'http://Attachment/Get?document_GUID=' + rec.get("document_GUID") + '_' + rec.get("name");
                alert(url);
                console.log(url);
            }
        }]
    }],
    height: 200,
    renderTo: Ext.getBody()
});