EXT JS Get ID on selection by column renderer

Question

Using ExtJS 4.2.3, I have GRID PANEL with list of attachments. Grid panel has cellclick listener which start to download file after selection cell. Need to remake code for image click in column renderer (column name 'Save')

Example of current code with cell click:

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

Code with column 'Save' where I need to reproduce cellclick function by column renderer:

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

You need to use actioncolumn for this.

In this FIDDLE, I have create a demo using your code and put modification. I hope this will help or guide you to achieve your requirement.

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', 'document_GUID'],
    data: {
        'items': [{
            'name': 'Lisa',
            "email": "[email protected]",
            "phone": "555-111-1224",
            "document_GUID": 123
        }, {
            'name': 'Bart',
            "email": "[email protected]",
            "phone": "555-222-1234",
            "document_GUID": 124
        }, {
            'name': 'Homer',
            "email": "[email protected]",
            "phone": "555-222-1244",
            "document_GUID": 125
        }, {
            'name': 'Marge',
            "email": "[email protected]",
            "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()
});