网格行上的Ext GWTGXT工具提示

问题描述

| 我正在为我的项目使用Ext GWT（GXT）开发自定义工具提示，并且当选择了这些网格时，该工具提示必须出现在Grid行上。 我无法使用默认的GXT工具提示或quicktip，因为我需要能够在此工具提示中添加Components（例如按钮）。 问题在于，GXT Grid组件不会公开与鼠标悬停有关的事件（尽管有RowClick和RowMouseDown）。 我尝试通过OnMouSEOver和OnMouSEOut事件将侦听器添加到Grid，但是它没有按预期工作。每当它触发这些事件 您将鼠标悬停在组成行的任何div和span上。 我看到解决此问题的唯一方法是对GridView组件进行子类化，并使每一行成为一个组件本身， 但这将需要大量工作，并且也可能会影响性能。我忍不住想，有更好的方法可以做到这一点。 谁能对GXT更有经验吗？

解决方法

尝试这个

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

            }
});

,onComponentEvent（）（在com.extjs.gxt.ui.client.widget.Component中定义，其主体为空，并在com.extjs.gxt.ui.client.widget.grid.Grid中被覆盖）也接收类型为Event.ONMOUSEOVER的事件和Event.ONMOUSEOUT Grid类的默认实现不处理这些事件，因此您可能需要在子类中重写此函数。 此外，在onComponentEvent（）的末尾，Grid调用GridView的函数handleComponentEvent（）。,我发现了两种方法可以做到这一点： 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);
            }
        }
    });
});

希望对您有帮助：),我知道这很旧，但是没有公认的答案，我想我找到了一个更好的方法：

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

,我使用的是GWT 2.6和GXT 3.1.0，我设法通过这种方式实现了...。 这里的RowSet类类似于Map

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