如何为extJS Grid添加行超链接？

Question

请问有人可以说明如何在ExtJS中的特定列的单元格中渲染超链接？我已经尝试将列绑定到我的JS中的render函数,然后从中发回html:

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

但是,有了这个问题,一旦我通过链接点击控制器,导航就会成功,但是后续导航到数据网格只显示空记录.

通过Spring MVC控制器成功从DB获取记录,我已经检查过了.

请注意,只有在我使用extJS网格中的行超链接导航离开网格时才会发生这种情况.如果我来到网格,并导航到其他地方并再次返回到网格,数据显示正常.只有在使用在一个/任何单元格中呈现的超链接导航离开网格时,才会出现此问题.

谢谢你的帮助!

Answer 1

这适用于ExtJS 4和5.

使用渲染器使内容看起来像一个链接:

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

Answer 2

我创建了一个渲染器，因此看起来就像您正在单击它一样。

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

但我使用单元格事件来管理点击。

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