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": "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()
});

Answer 2

Have you tried to use a action column instead?

     {
        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'));

            }
        }]
    }