PDA

View Full Version : Extjs grid cell to look like a pseudo hyperlink



vick_44
19 Jan 2017, 9:08 AM
I have this grid column which need to look like a hyperlink but not act as one.

I have tried adding below property in my model



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



my controller:



init: function()
{
this.control({
'#gridId':
{
cellclick: this.gridCellOnClick
}
});
},


Which not only makes it look like an hyperlink but also act like one. The problem i have with this is that hyperlinks are blocked in my parent application due to security concerns, so right now , on click of that particular cell the hyperlink is diverted to current page URL. What i want to achieve is, on click of the above cell, the controller to catch the entire row of the grid and perform further operation.

Any workaround or solution to my problem would be much appreciated. I just need to make the grid cell to look like a hyperlink.

Gary Schlosberg
19 Jan 2017, 3:56 PM
Can you simply color the content blue and underline it?

vick_44
20 Jan 2017, 5:04 AM
Well yes that would solve half of my problem, but then i am not able to obtain events of cell grid click from that particular cell.
For instance , If i declare the below listener for cellclick in main config and make selType : 'cellmodel',


listeners: {
cellclick: function(iView, iCellEl, iColIdx, iStore, iRowEl, iRowIdx, iEvent) {
alert('hola');
}
},


it will be applied to every cell of the grid. My requirement is that the event to be triggered only onclick of a text in a specific column. I mean it should be applied to all cells in that particular column and not all columns of the grid.

As per your suggestion I have made the grid column appear underlined and bluish but mouse over on text doesnt appear as hyperlink. But I can live with that as long as above issue gets resolved.



{
text : 'Blah BLah',
dataIndex : 'blahBlah',
width : 80,
renderer: function (value) {
return "<span style='color:blue;text-decoration:underline'>"+value+"</a>";
}
}

Gary Schlosberg
20 Jan 2017, 11:58 AM
Can you use the cell index argument to limit the code to just the desired columns?

vick_44
25 Jan 2017, 2:18 AM
Thanks Gary for the suggestions, based on your pointers have made below changes to achieve the requirement and it works well for me : ) .

In my grid had to make selection type as cell model.
selType : 'cellmodel'

And had to put a renderer for the column as below which makes it blue+ underlined+ mouse over pointer.


{
text : 'Blah Blah',
dataIndex : 'blahBlah',
width : 80,
renderer: function (value) {
return "<span style='color:blue;text-decoration:underline;cursor:pointer;'>"+value+"</a>";
}
}


And in my controller catch the 'cellclick' event for this grid. with below function definition.


blahBlahBlahfunction: function(gridView, iCellEl, columnIndex, iStore, iRowEl, rowIndex, iEvent) {
// the column index for which i wish to consider the click event
if (columnIndex == 0) {
var record = gridView.getRecord(iRowEl);
//do somethign with the record.
}
}

Gary Schlosberg
31 Jan 2017, 2:50 PM
Glad to hear it, and thanks for summarizing your findings.