Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2017, 10:04
Аватар для khusamov
Соединяю Node.js и Ext JS
Отправить личное сообщение для khusamov Посмотреть профиль Найти все сообщения от khusamov
 
Регистрация: 25.06.2009
Сообщений: 1,033

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

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

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


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

И как теперь быть?
__________________
Хусамов Сухроб, Москва, khusamov@yandex.ru
Мой JS-стек: Sencha ExtJS 6, Node.js, TypeScript.
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2017, 17:48
Профессор
Отправить личное сообщение для siber-biber Посмотреть профиль Найти все сообщения от siber-biber
 
Регистрация: 07.08.2013
Сообщений: 214

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
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2017, 17:50
Аватар для khusamov
Соединяю Node.js и Ext JS
Отправить личное сообщение для khusamov Посмотреть профиль Найти все сообщения от khusamov
 
Регистрация: 25.06.2009
Сообщений: 1,033

А полноценный? чтобы внутри были полноценные компоненты, а не статичный HTML
__________________
Хусамов Сухроб, Москва, khusamov@yandex.ru
Мой JS-стек: Sencha ExtJS 6, Node.js, TypeScript.
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2017, 09:50
Аватар для Infarch
Профессор
Отправить личное сообщение для Infarch Посмотреть профиль Найти все сообщения от Infarch
 
Регистрация: 06.06.2014
Сообщений: 292

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

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


Ну а виджет наследуете от тултипа и там творите что хотите.
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2017, 09:59
Аватар для Infarch
Профессор
Отправить личное сообщение для Infarch Посмотреть профиль Найти все сообщения от Infarch
 
Регистрация: 06.06.2014
Сообщений: 292

Кстати, модель в тултипе получаем так:
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);
		
	}
	
});
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2017, 13:23
Аватар для khusamov
Соединяю Node.js и Ext JS
Отправить личное сообщение для khusamov Посмотреть профиль Найти все сообщения от khusamov
 
Регистрация: 25.06.2009
Сообщений: 1,033

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

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

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

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

Мне сначала надо поразмышлять над delegate и target: grid.getEl(). Эти трюки для меня не очевидны пока.
__________________
Хусамов Сухроб, Москва, khusamov@yandex.ru
Мой JS-стек: Sencha ExtJS 6, Node.js, TypeScript.
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2017, 13:44
Аватар для Infarch
Профессор
Отправить личное сообщение для Infarch Посмотреть профиль Найти все сообщения от Infarch
 
Регистрация: 06.06.2014
Сообщений: 292

Еще строчку забыл: view = grid.getView()
Ответить с цитированием
  #8 (permalink)  
Старый 14.04.2017, 10:52
Аватар для khusamov
Соединяю Node.js и Ext JS
Отправить личное сообщение для khusamov Посмотреть профиль Найти все сообщения от khusamov
 
Регистрация: 25.06.2009
Сообщений: 1,033

Как дополнение к вопросу нашел вот эту ветку форума https://www.sencha.com/forum/showthread.php?259937
А также на стековерфлоу http://stackoverflow.com/questions/4...42936_43316686
__________________
Хусамов Сухроб, Москва, khusamov@yandex.ru
Мой JS-стек: Sencha ExtJS 6, Node.js, TypeScript.

Последний раз редактировалось khusamov, 14.04.2017 в 15:44.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы удалялись/скрывались пустые элементы таблицы Alex_newguy Общие вопросы Javascript 7 06.02.2017 16:01
Как сделать обёртку для функции? Артист Общие вопросы Javascript 17 21.10.2016 07:30
как сделать ползунок в swf для просмотра анимации по кадрам Nailya Flash 4 31.05.2013 20:26
(bool ? num1 : num2) - как сделать такое для операции сравнения > ? Owyn Общие вопросы Javascript 8 03.05.2013 11:29
Как сделать функцию типа toDataUrl для рисунка в ie6 ? Олег Общие вопросы Javascript 2 14.09.2008 00:06