EXT JS 获取列渲染器选择的 ID

Question

使用 ExtJS 4.2.3，我有带有附件列表的网格面板。网格面板有 cellclick 侦听器，它在选择单元格后开始下载文件。需要为列渲染器中的图像点击重新制作代码（列名'保存'）

点击单元格的当前代码示例：

 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;
                }
            },

包含“Save”列的代码，我需要在其中通过列渲染器重现 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

您是否尝试过改用操作列？

     {
        xtype:'actioncolumn',
        width:50,
        items: [{
            icon: 'urlToMyImage/image.png',
            tooltip: 'Do Stuff',
            handler: function(grid, rowIndex, colIndex) {

                //The hole record to play with
                var rec = grid.getStore().getAt(rowIndex);

                //the ID
                alert("My ID" + rec.get('MyIDColumn'));

            }
        }]
    }

Answer 2

您需要为此使用 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()
});

EXT JS 获取列渲染器选择的 ID

EXT JS Get ID on selection by column renderer

javascript

extjs

extjs4

web