如何在鼠标悬停时将工具提示放在GXT中的网格单元格上?

时间:2017-10-09 07:57:15

标签: java events gwt gxt listeners

如何在鼠标悬停的 GXT 中的网格单元格上添加工具提示

我可以为整个网格添加工具提示,但是找不到放置特定网格单元的方法。

更具体地说,如何从网格单元格中检索信息,当光标位于单元格上方时,可以在工具提示中显示单元格中的一些信息。

2 个答案:

答案 0 :(得分:0)

我认为最简单的方法是使用QuickTip类。这个在一些容器上监听鼠标悬停,并显示每个具有qtip属性存在的子DOM元素的提示。例如:

public class GxtToolTipInGxtGrid implements EntryPoint {

    public static class Model {
        private final String name;

        public Model(String name) {
            this.name = name;
        }

        public String getName() {
            return name;
        }
    }

    interface ModelProperties extends PropertyAccess<Model> {
        ValueProvider<Model, String> name();
    }

    private static List<Model> MODELS = Arrays.asList(new Model("John"), new Model("Mary"));
    private static ModelProperties PROPERTIES = GWT.create(ModelProperties.class);

    public void onModuleLoad() {
        ListStore<Model> store = new ListStore<>(Model::getName);
        store.addAll(MODELS);

        List<ColumnConfig<Model, ?>> columns = new ArrayList<>();
        ColumnConfig<Model, Model> column = new ColumnConfig<>(new IdentityValueProvider<>(), 200, "Name with tooltip");
        column.setCell(new SimpleSafeHtmlCell<>(new AbstractSafeHtmlRenderer<Model>() {
            @Override
            public SafeHtml render(Model object) {
                SafeHtmlBuilder sb = new SafeHtmlBuilder();
                //QuickTip will use this attribute (qtip) for showing the tip.
                sb.appendHtmlConstant("<div qtip='" + object.getName() + "'>");
                sb.appendEscaped(object.getName());
                sb.appendHtmlConstant("</div>");
                return sb.toSafeHtml();
            }
        }));
        columns.add(column);
        columns.add(new ColumnConfig<>(PROPERTIES.name(), 100, "Name w/o tooltip"));

        Grid<Model> grid = new Grid<>(store, new ColumnModel<>(columns));
        RootPanel.get().add(grid);
        //Attach QuickTip to grid
        Scheduler.get().scheduleDeferred(() -> new QuickTip(grid));
    }
}

但这是一种静态方法。我的意思是,决定显示工具提示以及在工具提示中显示的内容在渲染阶段。但是,如果您需要动态方法,则可以自定义实现QuickTip模拟。

另外,请看Ext GWT (GXT) tooltip over a grid row。它可能包含其他解决方案。

答案 1 :(得分:0)

  1. 在网格上注册Quicktip。
  2.   

    新的QuickTip(myGrid)

    1. 覆盖该单元格的渲染功能以获得工具提示。

      view