Sencha, GXT 3, insert a hyperlink into the grid

Question

I have a built-in editable grid. I need to change the column to display a hyperlink that invokes some UI actions when clicked.

Thanks.

My code is still. The link in the link column is displayed as a regular row. I know this is due to returning toString () below, but here I need help. Not sure how to do it right.

linkConf = new ColumnConfig<LinkData, String>(lp.url(), 200, "URL"); ... Anchor myLink = new Anchor(); myLink.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent cEv) { someAction(); } private void someAction() { } }); linkConf.setWidget(myLink, new SafeHtml() { @Override public String asString() { return toString(); } }); 

Answer 1

In one of my projects, I had to do the same. I would recommend using CellClickHandler instead of trying to click on the anchor.

First, create a more convenient handler for your click actions:

 public interface CellClickAction<P> { void onCellClick(P proxy); } 

Use this plugin that contains a mapping for each ValueProvider in the grid:

 public class GridCellClickPlugin<P> implements ComponentPlugin<Grid<P>> { private final Map<ValueProvider<P, ?>, CellClickAction<P>> mapping; public GridCellClickPlugin() { this.mapping = new HashMap<ValueProvider<P, ?>, CellClickAction<P>>(); } @Override public void initPlugin(final Grid<P> component) { component.addCellClickHandler(new CellClickHandler() { @Override public void onCellClick(CellClickEvent event) { if (!mapping.isEmpty()) { final ColumnConfig<P, ?> columnConfig = component.getColumnModel().getColumn(event.getCellIndex()); final CellClickAction<P> action = mapping.get(columnConfig.getValueProvider()); if (action != null) { final P proxy = component.getStore().get(event.getRowIndex()); action.onCellClick(proxy); } } } }); } } 

Register a click handler for this column and enable the plugin:

 final GridCellClickPlugin<LinkData> plugin = new GridCellClickPlugin<LinkData>(); plugin.getMapping().put(lp.url(), new CellClickAction<LinkData>() { @Override public void onCellClick(LinkData proxy) { //do the desired action here: redirect to some url, show pop-up window, etc } }); plugin.init(grid); 

Change the text as a link:

 linkConf = new ColumnConfig<LinkData, String>(lp.url(), 200, "URL"); linkConf.setCell(new AbstractCell<LinkData>() { @Override public void render(com.google.gwt.cell.client.Cell.Context context, LinkData value, SafeHtmlBuilder sb) { final Anchor anchor = new Anchor(value.getSomeText()); sb.appendHtmlConstant(anchor.getElement().toString()); } });