分機GWT（GXT）提示在網格行

Question

我正在開發使用分機GWT（GXT）我的一個項目的自定義提示，這說明文字要選擇的，當他們出現在網格行。 我無法使用默認的GXT工具提示或快速提示，因爲我需要能夠將組件（如按鈕）添加到此工具提示。

的問題是，GXT Grid組件不會暴露有關鼠標放在一排事件（雖然有RowClick和RowMouseDown）。 我試着用OnMouseOver和OnMouseOut事件向Grid添加一個監聽器，但它不能按預期工作。只要您將鼠標懸停在構成一行的任何div和跨度上，就會觸發這些事件。

我看到要解決這個問題的唯一方法是將GridView組件的子類化，並使每一行都成爲組件本身，但這將會很多工作，並且可能會影響性能。我不禁想到有更好的方法來做到這一點。

有人更有經驗的GXT能給我一個亮點嗎？

Answer 1

onComponentEvent（）（在具有空體的com.extjs.gxt.ui.client.widget.Component中定義，並在com.extjs.gxt.ui.client.widget.grid.Grid中重寫）也會接收Events鍵入Event.ONMOUSEOVER和Event.ONMOUSEOUT

在網格類的默認實現不處理這些事件，所以你可以在子類中重寫此功能。

另外，在onComponentEvent（）的結束時，網格調用的GridView的功能handleComponentEvent（）。

Answer 2

我發現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); 
      } 
     } 
    }); 
}); 

我希望這將有助於你:)

Answer 3

試試這個

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

      } 
}); 

Answer 4

我知道這是舊的，但有沒有公認的答案，我想我找到了一個更好的辦法：

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

Answer 5

我使用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);