Как показать всплывающую подсказку для ячеек сетки? - PullRequest
Новая
       28

Как показать всплывающую подсказку для ячеек сетки?

0 голосов
/ 15 мая 2018

У меня есть сетка, и при наведении мыши на ячейку появляется подсказка для каждой ячейки. Это прекрасно работает. Однако у меня есть пара вопросов:

1) Я хочу показывать всплывающие подсказки только для ячеек под столбцом флага.

2) Если ячейка не имеет значения, подсказка не отображается.

3) Наконец, как заставить всплывающую подсказку исчезать только при наведении мыши на ячейку Заранее большое спасибо!

Вот мой рабочий код: LIVE DEMO

Фрагмент кода: 

grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.el,
    delegate: '.x-grid-cell',
    trackMouse: true,
    listeners: {
        beforeshow: function updateTipBody(tip) {
            if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                header = grid.headerCt.getGridColumns()[grid.cellIndex];
                tip.update(grid.getStore().getAt(grid.recordIndex).get(header.dataIndex));
            }
        }
    }
});

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Вам не нужно писать дополнительный код для всплывающей подсказки только для функции визуализации записи в столбце Флаг и в условии записи, чтобы показывать только для непустых значений.как 

{
                    text: 'Flag',
                    flex: 1,
                    dataIndex: 'color',
                    renderer: function(value, meta, record) {
                        if(!Ext.isEmpty(value)) 
                            meta.tdAttr='data-qtip="'+value+'"';

                        return value;
                    }
                }
0 голосов
/ 16 мая 2018

1) Вы должны добавить собственный класс CSS в ячейки сетки через средство визуализации, а затем использовать этот класс CSS в качестве делегата для всплывающей подсказки.

2) Вы имеете полный контроль над нужными ячейкамидобавить класс CSS на основе значения или других значений записи в рендерере.Не добавляйте пользовательский класс CSS в ячейку сетки, если значение пустое.

3) hideDelay: 0 в подсказке.

Обязательные изменения кода: 

dataIndex: 'color',
renderer: function(v, meta) {
    if(v) meta.tdCls = 'customCls';
    return v;
}

и 

target: view.el,
delegate: '.customCls',
trackMouse: true,
hideDelay: 0,

Однако , похоже, существуют проблемы с uievent, по крайней мере в Firefox, о которых вам следует знать.Событие не всегда вызывается должным образом, иногда оно не запускается снова при перемещении между столбцами одной и той же строки, иногда оно вызывается с columnIndex = -1 при перемещении между строками.На образце страницы был сделан следующий снимок экрана:
image

Существует еще одна, менее хакерская и более поддерживаемая возможность реализовать это: добавлять подсказки прямо в средство визуализации.

Для этого удалите весь свой пользовательский код всплывающей подсказки.

Добавьте в средство визуализации атрибут data-qtip: 

dataIndex: 'color',
renderer: function(value, meta, record) {
    if(value) meta.tdAttr='data-qtip="'+value+'"';
    return value;
}

Вы можете изменить hideDelay в QuickTipManager , как показанов примере кода из документации QuickTipManager : 

// Init the singleton.  Any tag-based quick tips will start working.
Ext.tip.QuickTipManager.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
    hideDelay: 0
});

Соответствующая скрипка

...