分机GWT（GXT）提示在网格行

我正在开发使用分机GWT（GXT）我的一个项目的自定义提示，这说明文字要选择的，当他们出现在网格行。我无法使用默认的GXT工具提示或快速提示，因为我需要能够将组件（如按钮）添加到此工具提示。分机GWT（GXT）提示在网格行

的问题是，GXT Grid组件不会暴露有关鼠标放在一排事件（虽然有RowClick和RowMouseDown）。我试着用OnMouseOver和OnMouseOut事件向Grid添加一个监听器，但它不能按预期工作。只要您将鼠标悬停在构成一行的任何div和跨度上，就会触发这些事件。

我看到要解决这个问题的唯一方法是将GridView组件的子类化，并使每一行都成为组件本身，但这将会很多工作，并且可能会影响性能。我不禁想到有更好的方法来做到这一点。

有人更有经验的GXT能给我一个亮点吗？

来源

2011-04-19 Eduardo Palma

onComponentEvent（）（在具有空体的com.extjs.gxt.ui.client.widget.Component中定义，并在com.extjs.gxt.ui.client.widget.grid.Grid中重写）也会接收Events键入Event.ONMOUSEOVER和Event.ONMOUSEOUT

在网格类的默认实现不处理这些事件，所以你可以在子类中重写此功能。

另外，在onComponentEvent（）的结束时，网格调用的GridView的功能handleComponentEvent（）。

来源

2011-06-01 10:22:15 MarioP

顺便说一句，我知道我的解决方案有与听众无关，但效果是一样的。 onComponentEvent将一些（不是全部）事件委托给其他onXyz（）方法，然后将这些事件激发给侦听器。 imho，重写onXyz函数甚至比添加监听器还要快（但我从来没有真正测量过它） – MarioP 2011-06-01 10:27:17

我发现2种方法来做到这一点：

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

我希望这将有助于你:)

来源

2011-06-03 13:57:31 Andron

试试这个

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

      } 
});

来源

2011-06-15 11:18:38 imsearcher

我知道这是旧的，但有没有公认的答案，我想我找到了一个更好的办法：

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

来源

2017-03-11 16:22:02

我使用GWT 2.6和3.1.0 GXT，我设法做这样.... 这里的类的RowSet类似于一个地图

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

来源

2017-05-19 14:24:30

分机GWT（GXT）提示在网格行

回答

相关问题