Как сделать tooltip для ячейки таблицы?
Как сделать tooltip для ячейки таблицы?
В коде класса таблицы события mouseover и mouseout заблокированы:
if (cell && type !== 'mouseover' && type !== 'mouseout') {
http://docs.sencha.com/extjs/6.2.0/c...Ext.view.Table И как теперь быть? |
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
|
А полноценный? чтобы внутри были полноценные компоненты, а не статичный HTML
|
Начало почти такое же. Делаете рендерер:
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()
});
Ну а виджет наследуете от тултипа и там творите что хотите. |
Кстати, модель в тултипе получаем так:
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);
}
});
|
Решение любопытное тем, что не совсем очевидные вещи вы используете.
Например опция delegate. Также не очевидный трюк target: grid.getEl() Но решение на первый взгляд отличное. Я так понимаю экземпляр тултипа ОДИН, и он один вызывается для каждой ячейки, то есть память не забивается кучей тултипов (для каждой ячейки свой). И модель под рукой у тултипе. Осталось понять, как такой тултип организовать внутри конфига колонки, чтобы декларативный способ подключения тултипа тоже работал. Но это я сам придумаю и тут выложу. Мне сначала надо поразмышлять над delegate и target: grid.getEl(). Эти трюки для меня не очевидны пока. |
Еще строчку забыл: view = grid.getView()
|
Как дополнение к вопросу нашел вот эту ветку форума https://www.sencha.com/forum/showthread.php?259937
А также на стековерфлоу http://stackoverflow.com/questions/4...42936_43316686 |
| Часовой пояс GMT +3, время: 07:45. |