Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Как сделать tooltip для ячейки таблицы? (https://javascript.ru/forum/extjs/68332-kak-sdelat-tooltip-dlya-yachejjki-tablicy.html)

khusamov 10.04.2017 10:04

Как сделать tooltip для ячейки таблицы?
 
Как сделать tooltip для ячейки таблицы?

В коде класса таблицы события mouseover и mouseout заблокированы:

if (cell && type !== 'mouseover' && type !== 'mouseout') {


http://docs.sencha.com/extjs/6.2.0/c...Ext.view.Table

И как теперь быть?

siber-biber 10.04.2017 17:48

http://docs.sencha.com/extjs/6.2.1/c...ipManager.html
http://docs.sencha.com/extjs/6.2.1/c...l#cfg-renderer

var myRenderer = function(value, metaData, record, rowIndex, colIndex) {
    if (colIndex === 0) {
        metaData.tdAttr = 'data-qtip=' + value;
    }
    // additional logic to apply to values in all columns
    return value;
}

// using the same renderer on all columns you can process the value for
// each column with the same logic and only set a tooltip on the first column
renderer: myRenderer

khusamov 10.04.2017 17:50

А полноценный? чтобы внутри были полноценные компоненты, а не статичный HTML

Infarch 11.04.2017 09:50

Начало почти такое же. Делаете рендерер:

xtest: function(value, metaData, record, rowIndex, colIndex){
		metaData.tdCls = 'abyrvalg';
		return value;
	},


и инициализируете тултип:

var grid = me.getView();
var el = grid.getEl();

Ext.widget('your-cool-widget', {
	gridView: view,
	target: el,
	delegate: 'td.abyrvalg',
	width: 600,
	height: 500,
	trackMouse: true,
	dismissDelay: 0,
	autoHide: true,
	renderTo: Ext.getBody()
});


Ну а виджет наследуете от тултипа и там творите что хотите.

Infarch 11.04.2017 09:59

Кстати, модель в тултипе получаем так:
Ext.define('ContentPanel.view.workspace.popup.Metadata', {
	extend: 'Ext.tip.ToolTip',
	alias: 'widget.workspace-popup-metadata',
	
	config: {
		gridView: null
	},
	
	beforeShow: function(){
		var
			record = this.getGridView().getRecord(this.triggerElement);
		
	}
	
});

khusamov 11.04.2017 13:23

Решение любопытное тем, что не совсем очевидные вещи вы используете.
Например опция delegate.

Также не очевидный трюк target: grid.getEl()

Но решение на первый взгляд отличное.
Я так понимаю экземпляр тултипа ОДИН, и он один вызывается для каждой ячейки, то есть память не забивается кучей тултипов (для каждой ячейки свой). И модель под рукой у тултипе.

Осталось понять, как такой тултип организовать внутри конфига колонки, чтобы декларативный способ подключения тултипа тоже работал. Но это я сам придумаю и тут выложу.

Мне сначала надо поразмышлять над delegate и target: grid.getEl(). Эти трюки для меня не очевидны пока.

Infarch 11.04.2017 13:44

Еще строчку забыл: view = grid.getView()

khusamov 14.04.2017 10:52

Как дополнение к вопросу нашел вот эту ветку форума https://www.sencha.com/forum/showthread.php?259937
А также на стековерфлоу http://stackoverflow.com/questions/4...42936_43316686


Часовой пояс GMT +3, время: 11:09.