How to add a row hyperlink for an extJS Grid?

Question

Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS? I have tried binding the column to a render function in my JS, from which I send back the html:

<a href="ControllerName/viewName">SELECT</a>

However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.

The records get fetched from the DB successfully through the Spring MVC controller, I have checked.

Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine. The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.

Thanks for your help!

Answer 1

This is for ExtJS 4 and 5.

Use a renderer to make the contents look like a link:

renderer: function (value) {
    return '<a href="#">'+value+'</a>';
}

Then use the undocumented, dynamically generated View event cellclick to process the click:

viewConfig: {
    listeners: {
        cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {

            var linkClicked = (e.target.tagName == 'A');
            var clickedDataIndex =
                view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;

            if (linkClicked && clickedDataIndex == '...') {
                alert(record.get('id'));
            }
        }
    }
}

Answer 2

Try something like this:

Ext.define('Names', {
    extend: 'Ext.data.Model',
    fields: [
        { type: 'string', name: 'Id' },
        { type: 'string', name: 'Link' },
        { type: 'string', name: 'Name' }
    ]
});

 var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {
            text: 'Id',
            dataIndex: 'Id'
        },
        {
            text: 'Name',
            dataIndex: 'Name',
            renderer: function (val, meta, record) {
                return '<a href="' + record.data.Link + '">' + val + '</a>';
            }
        }
               ...
               ...
               ...

However my thanks to - ExtJS Data Grid Column renderer to have multiple values