我正在为我的项目开发一个使用Ext GWT（GXT）的自定义工具提示，并且此工具提示在选择时必须在网格行上出现。 我不能使用默认的 GXT 工具提示或快速提示，因为我需要能够将组件（如按钮）添加到此工具提示。
问题在于 GXT Grid 组件没有公开与鼠标悬停在一行上相关的事件（尽管有 RowClick 和 RowMouseDown）。 无论如何，我尝试使用 OnMouseOver 和 OnMouseOut 事件向 Grid 添加一个侦听器，但它没有按预期工作。它会在任何时候触发这些事件 您将鼠标悬停在组成一行的任何 div 和 span 上。
我认为解决这个问题的唯一方法是子类化 GridView 组件并使每一行成为一个组件本身， 但这将是很多工作，并且可能也会影响性能。我不禁想到有更好的方法来做到这一点。
能否请更有 GXT 经验的人给我指点一下？
【问题讨论】：
试试这个
QuickTip quickTip = new QuickTip(grid);
grid.addListener(Events.OnMouseOver, new Listener<GridEvent<BeanModel>>(){
@Override
public void handleEvent(GridEvent<BeanModel> ge) {
com.google.gwt.dom.client.Element el= grid.getView().getCell(ge.getRowIndex(),ge.getColIndex());
String html = "<span qtip='" + el.getFirstChildElement().getInnerText() + "'>" + el.getFirstChildElement().getInnerText() + "</span>";
el.getFirstChildElement().setInnerHTML(html);
}
});
【讨论】：
onComponentEvent()（在 com.extjs.gxt.ui.client.widget.Component 中定义，主体为空，在 com.extjs.gxt.ui.client.widget.grid.Grid 中被覆盖）也接收类型为的事件Event.ONMOUSEOVER 和 Event.ONMOUSEOUT
Grid 类中的默认实现不处理这些事件，因此您可能希望在子类中覆盖此函数。
另外，在onComponentEvent()结束时，Grid调用了GridView的handleComponentEvent()函数。
【讨论】：
我找到了两种方法：
1.对于网格的特定列描述渲染器，例如：
{
width: 200,
dataIndex : 'invoice',
renderer:addTooltip
}
还有你的渲染器功能：
function addTooltip(value, metadata){
metadata.attr = 'ext:qtip="' + value + '"';
return value;
}
但只有当您的鼠标指针位于该特定列上方时，此方法才有效。
2.对于网格的“渲染”事件应用/使用此功能：
var myGrid = grid;
myGrid.on('render', function() {
myGrid.tip = new Ext.ToolTip({
view: myGrid.getView(),
target: myGrid.getView().mainBody,
delegate: '.x-grid3-row',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function updateTipBody(tip) {
tip.body.dom.innerHTML = "Over row " + tip.view.findRowIndex(tip.triggerElement);
}
}
});
});
希望对你有帮助:)
【讨论】：
我知道这是旧的，但没有公认的答案，我想我找到了更好的方法：
grid.addListener(Events.OnMouseOver, new Listener<GridEvent<Model>>() {
@Override
public void handleEvent(GridEvent<Model> ge) {
if (grid.getToolTip() != null) {
grid.getToolTip().hide();
}
ModelData model = ge.getModel();
if (model != null) {
Object someValue = model.get("someProperty");
String label = someValue.toString();
grid.setToolTip(label);
}
if (grid.getToolTip() != null) {
grid.getToolTip().show();
}
}
});
【讨论】：
我正在使用 GWT 2.6 和 GXT 3.1.0，我设法以这种方式做到这一点...... 这里的 RowSet 类类似于 Map
GridView<RowSet> view = new GridView<RowSet>() {
private Element cell;
@Override
protected void handleComponentEvent(Event event) {
switch (event.getTypeInt()) {
case Event.ONMOUSEMOVE:
cell = Element.is(event.getEventTarget()) ? findCell((Element) event.getEventTarget().cast())
: null;
break;
}
super.handleComponentEvent(event);
}
@Override
protected void onRowOut(Element row) {
grid.hideToolTip();
grid.setToolTipConfig(null);
super.onRowOut(row);
}
@Override
protected void onRowOver(final Element row) {
super.onRowOver(row);
grid.hideToolTip();
grid.setToolTipConfig(null);
ToolTipConfig config = new ToolTipConfig();
int rowIndex = grid.getView().findRowIndex(row);
// Through "rowIndex" you can get the Row like this :
// grid.getStore().get(rowIndex)
config.setBodyHtml("Your tool tip text here");
config.setTitleHtml("Tool Tip Title");
config.setCloseable(true);
grid.setToolTipConfig(config);
int absoluteRight = (cell != null) ? cell.getAbsoluteRight() : row.getAbsoluteRight();
int absoluteTop = (cell != null) ? cell.getAbsoluteTop() : row.getAbsoluteTop();
Point point = new Point(absoluteRight, absoluteTop);
grid.getToolTip().showAt(point);
}
};
view.setAutoFill(true);
grid.setView(view);
【讨论】：