Posted on November 30, 2011
If you need tooltips within a grid you should create your own GridCellRenderer.
public class MyData extends BaseModelData {
public MyData(String name, Date date) {
set("name", name);
set("date", date);
}
}
public class MyPanel extends ContentPanel {
public MyPanel() {
// ...
ListStore store = new ListStore();
Grid grid = new Grid(store, new MyColumnModel());
// ...
add(grid);
new QuickTip(grid); // don't forget it!
}
}
public class MyColumnModel extends ColumnModel {
public MyColumnModel() {
super(new ArrayList());
// our ModelData has two properties: name and date
ColumnConfig aCol = new ColumnConfig("name", "Name", 300);
aCol.setRenderer(new NameRenderer());
configs.add(aCol);
ColumnConfig bCol = new ColumnConfig("date", "Date", 100);
bCol.setRenderer(new DateRenderer());
configs.add(bCol);
}
private class NameRenderer implements GridCellRenderer {
public Object render(MyData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
return "<div>" + model.get(property) + "</div>";
}
}
private class DateRenderer implements GridCellRenderer {
public Object render(MyData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore store, Grid grid) {
String date = DateTimeFormat.getFormat("dd.MM.yyyy").format(model.get("date"));
return "<div qtitle=\"Date\" qtip=\"a date with format dd.MM.yyyy\">" + date + "</div>";
}
}
}
We can return HTML code from the renderer, which has “qtitle” and “qtip” attributes, which are used by the QuickTip instance.