对话框阻止后台事件答案

【问题标题】：Dialog box prevents background events对话框阻止后台事件
【发布时间】：2014-12-23 10:37:22
【问题描述】：

我正在尝试实现一个类似 Excel 的功能，其中一个单元格可能有评论，所以在悬停时我希望出现一个包含所需文本的弹出窗口。一切都很好，直到弹出窗口出现。我面临的问题是，当弹出窗口出现时，所有后台事件都被禁用。当悬停在网格的任何其他部分时，如果弹出窗口正在显示（例如标题不可访问），则不会发生任何事情。虽然我特别声明dialog.setGlassEnabled(false);。正如我在 chrome 开发工具中看到的那样，充当背景的 glass div 确实不存在。那么为什么会出现这种奇怪的行为呢？还有别的吗？下面是整个测试用例（为了方便重现），在不同的部分是我认为很重要的代码。我使用的是 GWT 2.6 和 GXT 3.1，但是我使用的组件是 GWT 的原生组件 DialogBox，所以我认为 GXT 在这里无关紧要。

mainGrid.addHandler(new GridHoverPopUpHandler() 
{
    @Override
    public void onHover(Element element) 
    {
        dialog.hide();
        if(element == null) return;

        Element cell = mainGrid.getView().findCell(element);
        if(cell != null && cell.hasClassName("comment-indicator"))
        {
            Label label = new Label("mpazingka " + (String)cell.getInnerText());
            dialog.setText("Title of comment");
            dialog.setWidget(label);
            dialog.setPopupPosition(absoluteX, absoluteY); 
            dialog.show();  
        }
    }

}, MouseMoveEvent.getType());

abstract class GridHoverPopUpHandler implements MouseOutHandler, MouseMoveHandler 
{
    protected int absoluteX;
    protected int absoluteY;
    private Element lastHoveredElement = null;
    protected DialogBox dialog;

    public abstract void onHover(Element element);

    GridHoverPopUpHandler()
    {
        dialog = new DialogBox();
        dialog.setGlassEnabled(false);
    }

    @Override
    public void onMouseMove(MouseMoveEvent event) 
    {
        Element curHoveredElement = null;
        NativeEvent natev = event.getNativeEvent();
        if (Element.is(natev.getEventTarget())) 
        {
           curHoveredElement = Element.as(natev.getEventTarget());
        }
        if(lastHoveredElement == curHoveredElement) 
        {
            return;
        }

        absoluteX = event.getClientX();
        absoluteY = event.getClientY();

        lastHoveredElement = curHoveredElement;
        onHover(curHoveredElement);
    }

    @Override
    public void onMouseOut(MouseOutEvent event) 
    {
        //TODO: Pendig implementation
    }
}

package com.test.client;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.google.gwt.cell.client.DateCell;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.event.dom.client.MouseMoveEvent;
import com.google.gwt.event.dom.client.MouseMoveHandler;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
import com.sencha.gxt.widget.core.client.grid.GridViewConfig;
import com.sencha.gxt.widget.core.client.grid.GroupSummaryView;
import com.sencha.gxt.widget.core.client.grid.SummaryColumnConfig;

public class GridHoverExample implements IsWidget, EntryPoint {
    private static final StockProperties props = GWT.create(StockProperties.class);

    private ContentPanel root;
    private ArrayList<String> comments; 

    private void rootInit() {
        root = new ContentPanel();
        root.setHeadingText("Locked Grid Sample");
        root.setPixelSize(400, 300);
        comments = new ArrayList();
        comments.add("Stack_2");
    }

    @Override
    public Widget asWidget() {

        if (root == null) {

            rootInit();

            ColumnConfig<Stock, String> nameCol = new SummaryColumnConfig<Stock, String>(props.name(), 100, SafeHtmlUtils.fromTrustedString("<b>Company</b>"));
            ColumnConfig<Stock, String> symbolCol = new SummaryColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
            ColumnConfig<Stock, Double> changeCol = new SummaryColumnConfig<Stock, Double>(props.change(), 100, "Change");
            ColumnConfig<Stock, String> industryCol = new SummaryColumnConfig<Stock, String>(props.industry(), 100, "Industry");
            ColumnConfig<Stock, Date> dateCol = new SummaryColumnConfig<Stock, Date>(props.date(), 100, "Date");
            dateCol.setCell(new DateCell(DateTimeFormat.getFormat("MM/dd/yyyy")));

            List<ColumnConfig<Stock, ?>> ccFree = new ArrayList<ColumnConfig<Stock, ?>>();

            ccFree.add(nameCol);
            ccFree.add(symbolCol);
            ccFree.add(changeCol);
            ccFree.add(dateCol); 
            ccFree.add(industryCol); 

            ColumnModel<Stock> cm = new ColumnModel<Stock>(ccFree);

            ListStore<Stock> store = new ListStore<Stock>(props.key());

            for (int i = 1; i <= 100; i++)
                store.add(new Stock("Stack_"+i, "S_"+i, 2, 2, new Date()));

            final Grid<Stock> mainGrid = new Grid<Stock>(store, cm);

            mainGrid.addHandler(new GridHoverPopUpHandler() 
            {
                @Override
                public void onHover(Element element) 
                {
                    dialog.hide();
                    if(element == null) return;

                    Element cell = mainGrid.getView().findCell(element);
                    if(cell != null && cell.hasClassName("comment-indicator"))
                    {
                        Label label = new Label("mpazingka " + (String)cell.getInnerText());
                        dialog.setText("Title of comment");
                        dialog.setWidget(label);
                        dialog.setPopupPosition(absoluteX, absoluteY); 
                        dialog.show();  
                    }
                }

            }, MouseMoveEvent.getType());

            mainGrid.setView(createGridView());

            root.setWidget(mainGrid);
        }

        return root;
    }

    @Override
    public void onModuleLoad() {
        RootPanel.get("nameFieldContainer").add(asWidget());
    }

    private GridView<Stock> createGridView() 
    {   
        final GroupSummaryView<Stock> view = new GroupSummaryView<Stock>();

        view.setShowGroupedColumn(false);
        view.setStripeRows(true);
        view.setColumnLines(true);
        view.setSortingEnabled(false);
        view.setShowDirtyCells(false);

        view.setViewConfig(new GridViewConfig<Stock>()
        {
            @Override
            public String getRowStyle(Stock model, int rowIndex)
            {
                return "";
            }

            @Override
            public String getColStyle(Stock model, ValueProvider<? super Stock, ?> valueProvider, int rowIndex, int colIndex)
            {       
                String style = "";
                if(model.getName().equals(comments.get(0)) && colIndex == 0)
                {
                    style += "comment-indicator "; 
                }

                style += "columnWidth";
                return style;
            }
        });

        return view;
    }
}

abstract class GridHoverPopUpHandler implements MouseOutHandler, MouseMoveHandler 
{
    protected int absoluteX;
    protected int absoluteY;
    private Element lastHoveredElement = null;
    protected DialogBox dialog;

    public abstract void onHover(Element element);

    GridHoverPopUpHandler()
    {
        dialog = new DialogBox();
        dialog.setGlassEnabled(false);
    }

    @Override
    public void onMouseMove(MouseMoveEvent event) 
    {
        Element curHoveredElement = null;
        NativeEvent natev = event.getNativeEvent();
        if (Element.is(natev.getEventTarget())) 
        {
           curHoveredElement = Element.as(natev.getEventTarget());
        }
        if(lastHoveredElement == curHoveredElement) 
        {
            return;
        }

        absoluteX = event.getClientX();
        absoluteY = event.getClientY();

        lastHoveredElement = curHoveredElement;
        onHover(curHoveredElement);
    }

    @Override
    public void onMouseOut(MouseOutEvent event) 
    {
        //TODO: Pendig implementation
    }
}

更新

好的，我找到了。为了操作 DOM 以使组件可拖动，此小部件捕获了一些事件（鼠标事件）。由于时间限制，我没有跟进，所以我使用了DecoratedPopupPanel，它是DialogBox 的父类，并且没有捕获我需要的所有这些事件。我将等待一两天，以获得有关执行此事件捕获的部分以及如何禁用它的答案。如果未提供，我将发布此作为关闭主题的答案。

【问题讨论】：

标签： java gwt popup gxt

【解决方案1】：

我认为您可能通过使用对话框来完成工具提示的功能而做得过分了。恕我直言，您应该做的是将工具提示添加到您想要具有“excel 评论”功能的单元格。因此，每当用户将鼠标悬停在该单元格上时，它都会显示加载了您评论中的数据的工具提示。看看这里的基本网格示例：http://www.sencha.com/examples/#ExamplePlace:basicgrid 尝试将鼠标悬停在更改单元格上，它会弹出一个工具提示。关键是要创建自己的网格单元实现，如下所示：

ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
      changeCol.setCell(new AbstractCell<Double>() {

   @Override
   public void render(Context context, Double value, SafeHtmlBuilder sb) {
      String style = "style='color: " + (value < 0 ? "red" : "green") + "'";
      String v = number.format(value);
      sb.appendHtmlConstant("<span " + style + " qtitle='Change' qtip='" + v + "'>" + v + "</span>");
   }
});

如果您需要使用不同类型的工具提示，请查看此处的工具提示示例：http://www.sencha.com/examples/#ExamplePlace:tooltips

希望对你有帮助。

【讨论】：