Got it, let's adjust your Grid Panel so clicking the save image in the Save column triggers the file download, instead of relying on the full cell click. Here are three robust approaches tailored for ExtJS 4.2.3:

Approach 1: Direct Download Link (Simplest) #

Leverage the renderer's access to the row record to build a proper download URL directly in the <a> tag. This uses the browser's default link behavior to trigger the download:

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, metaData, record) {
                // Get the document GUID from the current row's record
                var docGuid = record.get("document_GUID");
                // Build the full download URL
                var downloadUrl = 'http://.../Attachment/Get?document_GUID=' + docGuid;
                // Return the image wrapped in a link pointing to the download URL
                return '<a href="' + downloadUrl + '" target="_blank">' + 
                           '<img src="/APPLICATION/Images/Save24.gif"/>' + 
                       '</a>';
            }
        },
    ]
},

• Why this works: The renderer receives the full row record as a parameter, so you can pull the document_GUID directly from the data store.
• Notes: Remove target="_blank" if you want the download to happen in the same tab instead of a new one.

Approach 2: Custom Click Handler (Controlled Logic) #

If you need to add extra logic (like logging, validation, etc.) before triggering the download, use a dedicated function and attach it to the image's click event:

First, define the download function (place this in a scope accessible to your Grid):

function downloadAttachment(docGuid) {
    var url = 'http://.../Attachment/Get?document_GUID=' + docGuid;
    console.log('Initiating download for:', url);
    // Add any extra checks/logic here
    window.location = url;
}

Then update the renderer to pass the document GUID to this function:

renderer: function (val, metaData, record) {
    var docGuid = record.get("document_GUID");
    return '<a href="javascript:void(0);" onclick="downloadAttachment(\'' + docGuid + '\')">' +
               '<img src="/APPLICATION/Images/Save24.gif"/>' +
           '</a>';
}

• Why this works: The onclick event calls your custom function with the correct document_GUID for the row, keeping your download logic centralized.

Approach 3: ExtJS Event Delegation (Component-Friendly) #

For a more "ExtJS-native" approach, use event delegation on the Grid's view to listen for clicks on the save image. This avoids global functions and keeps all logic tied to the Grid component:

FileGrid = new Ext.grid.Panel({
    renderTo: "EXT-CONTENT",
    width: 500,
    height: 600,
    listeners: {
        // Wait for the view to be ready before attaching the listener
        viewready: function(grid) {
            grid.getView().on('click', function(e) {
                // Check if the clicked element is your save image
                var saveImg = e.getTarget('img[src="/APPLICATION/Images/Save24.gif"]');
                if (saveImg) {
                    // Get the corresponding row record
                    var record = grid.getView().getRecord(saveImg.up('tr'));
                    var url = 'http://.../Attachment/Get?document_GUID=' + record.get("document_GUID");
                    console.log(url);
                    window.location = url;
                    e.stopEvent(); // Prevent any default link behavior
                }
            });
        }
        // Remove the old cellclick listener if you don't need it anymore
        // cellclick: function(...) { ... }
    },
    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) {
                    // Just return the image (or wrap in a dummy link for styling)
                    return '<a href="javascript:void(0);"><img src="/APPLICATION/Images/Save24.gif"/></a>';
                }
            },
        ]
    },
    store: Ext.data.StoreManager.lookup('FileStore')
});

• Why this works: ExtJS's view event delegation lets you target specific elements without attaching listeners to every single image in the grid, which is more performant.
• Notes: This approach is great if you need to extend the behavior later (e.g., disable downloads for certain rows) since all logic is in one place.

Whichever approach you choose, make sure to remove the original cellclick listener if you don't want clicking anywhere in the cell to trigger a download anymore.

内容的提问来源于stack exchange，提问作者Dmitry