转GWTEXT中增加tool的控制-优快云博客

本文介绍了一个 GWT-Ext 中工具处理程序的实现方式，并提供了一个用于改变图标状态（如pin/unpin）的具体示例。在 IE 浏览器中存在一个悬停效果的问题，即当图标为pin状态时，悬停显示为unpin。通过将 mouseover 事件替换为 mouseenter 事件解决了该问题。

转自这个文章
[url]http://code.google.com/p/gwt-ext/issues/detail?id=406[/url]

Added a new Interface that implementors should implement the onClick event. This
event does pass the necessary information to the Tool.

The new interface is ToolHandler and the signature of the onclick event is:
public void onClick(EventObject e, ExtElement toolEl, Panel panel);

With this, now the you can change the icon and toggle it as it is the case of
pin/unpin.

Here is an example of how to change the pin/unpin icon when using ToolHandler:


public class myToolHandler implements ToolHandler{
  boolean pin = false;
  ExtElement ele = null;

  public void setElement(){
    EventManager.addListener(ele.getDOM(), "mouseover", new EventCallback(){
      public void execute(EventObject e) {
        if(pin){
          ele.removeClass("x-tool-unpin-over");
          ele.addClassOnOver("x-tool-pin-over");
        }else{
          ele.removeClass("x-tool-pin-over");
          ele.addClassOnOver("x-tool-unpin-over");
        }
      }
    }, new ListenerConfig(){
      {
        setStopEvent(true);
      }
    });
  }

  public void onClick(EventObject e, ExtElement toolEl, Panel panel) {
    if(pin){
      Ext.fly(toolEl.getDOM()).replaceClass("x-tool x-tool-pin", "x-tool x-tool-
unpin");
    }else{
      Ext.fly(toolEl.getDOM()).replaceClass("x-tool x-tool-unpin", "x-tool x-tool-
pin");
    }
    pin = !pin;
    if(ele == null){
      ele = toolEl;
      setElement();
    }
  }
}

The above works well... Except in IE when the icon is PIN and you hover on it, it
shows as UNPIN. Could not figure out why!

Comment 2 by menschfe...@gmail.com, Feb 02, 2009

"The above works well... Except in IE when the icon is PIN and you hover on it, it
shows as UNPIN. Could not figure out why!"

Anyone know the fix for this? I get the same result in Chrome.

Comment 3 by stylina...@gmail.com, Jun 29, 2010

FYI - I was able to fix the hover issue by changing:

EventManager.addListener(ele.getDOM(), "mouseover", new EventCallback()

to:

EventManager.addListener(ele.getDOM(), "mouseenter", new EventCallback()