Geek Answers Handbook

How to add row hyperlink for extJS grid?

Can someone please tell about how to make a hyperlink in cells of a certain column in ExtJS? I tried to bind the column to the rendering function in my JS, from which I send the html back:

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

However, the problem with this is that after I hit the controller with the link, the navigation will be successful, but the subsequent navigation data to the data grid displays only empty records.

Records are retrieved from the database successfully through the Spring MVC controller, I checked.

Note that this only happens after I use the line hyperlink in the extJS grid to go from the grid. If I come to the grid and move elsewhere and return to the grid again, the data is displayed in order. The problem arises only in the case of a transition from the grid using the hyperlink displayed in one / any of the cells.

Thank you for your help!

+5
source share
7 answers

I created a renderer, so it looked like you were clicking on it.

aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},

But I used the cell event to control the click.

cellclick: {
    fn: function (o, idx, column, e) {
        if (column == 1)  // Doesn't prevent the user from moving the column
        {
            var store = o.getStore();
            var record = store.getAt(idx);
            // Do work
        }
    }
}
+1
source

This is for ExtJS 4 and 5.

Use renderer to make the content look like a link:

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

View cellclick:

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'));
            }
        }
    }
}
+15

, , , ( CSS) cellclick GridPanel . , ( , , ).

+2

- :

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>';
            }
        }
               ...
               ...
               ...

- ExtJS,

+2

CellActions RowActions , , .

- , <span> , @bmoeskau.

+1

"renderer", HTML-, .

0

, , . extJS-all.js script .

MVC- Spring , , , reset "totalProperty" Ext.data.XmlStore 0 , , , .

, ext-JS "totalProperty", DataStore. dataStore , reset null, , , .

!

0

More articles:


All Articles