Всплывающая подсказка Ext GWT (GXT) над строкой сетки - PullRequest
Новая
       6

Всплывающая подсказка Ext GWT (GXT) над строкой сетки

4 голосов
/ 19 апреля 2011

Я разрабатываю настраиваемую подсказку, используя Ext GWT (GXT) для моего проекта, и эта подсказка должна появляться над строками сетки, когда они выбраны. Я не могу использовать всплывающую подсказку GXT или всплывающую подсказку по умолчанию, потому что мне нужно иметь возможность добавлять компоненты (например, кнопки) к этой подсказке.

Проблема в том, что компонент GXT Grid не отображает событие, связанное с наведением курсора на строку (хотя есть RowClick и RowMouseDown). Я попытался добавить слушатель в Grid с событиями OnMouseOver и OnMouseOut, но он не работает должным образом. Это запускает эти события всякий раз, когда Вы наводите курсор мыши на любой из элементов div и span, составляющих строку.

Единственный способ решить эту проблему - это создать подкласс компонента GridView и сделать каждую строку самой Компонентом, но это было бы много работы и, вероятно, повлияет на производительность. Я не могу помочь, но думаю, что есть лучший способ сделать это.

Может ли кто-нибудь более опытный с GXT дать мне свет?

Ответы [ 5 ]

2 голосов
/ 15 июня 2011

попробуйте 

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

            }
});
0 голосов
/ 19 мая 2017

Я использую 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);
0 голосов
/ 11 марта 2017

Я знаю, что это старый, но нет принятого ответа, и я думаю, что нашел лучший способ: 

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();
                }
            }
        });
0 голосов
/ 03 июня 2011

Я нашел 2 способа сделать это:

1.Для конкретного столбца сетки опишите рендерер, например: 

{
    width: 200,
    dataIndex : 'invoice',
    renderer:addTooltip
}

И вашу функцию рендерера: 

function addTooltip(value, metadata){
    metadata.attr = 'ext:qtip="' + value + '"';
    return value;
}

Но этот метод будет работать только тогда, когда указатель мыши будет выше указанного столбца.

2.Для события 'render' сетки примените / используйте эту функцию: 

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

Я надеюсь, что это будет полезно для вас:)

0 голосов
/ 01 июня 2011

onComponentEvent () (определенный в com.extjs.gxt.ui.client.widget.Component с пустым телом и переопределенный в com.extjs.gxt.ui.client.widget.grid.Grid) также получает события с типом Event.ONMOUSEOVER и Event.ONMOUSEOUT

Реализация по умолчанию в классе Grid не обрабатывает эти события, поэтому вы можете переопределить эту функцию в подклассе.

Кроме того, в конце onComponentEvent () Grid вызывает функцию handleComponentEvent () GridView.

...