extjs - ExtJS - 网格单元工具提示
问题描述
我正在尝试为单元格创建一个工具提示。下面的代码执行此操作,但工具提示仅出现 onClick(在 mozilla 中),而在 IE 中,工具提示出现在 mouseOver 上,但显示最后单击的单元格的值。
我想要一个鼠标悬停网格上的工具提示,其中单元格内容作为工具提示显示值。
请提出任何其他方法来实现这一目标。提前致谢。
var grid = Ext.getCmp('your_grid_id'); // Enter your grid id
initToolTip(grid); // call function
initToolTip: function(grid) {
var view = grid.view;
// record the current cellIndex
grid.mon(view, {
uievent: function(type, view, cell, recordIndex, cellIndex, e) {
grid.cellIndex = cellIndex;
grid.recordIndex = recordIndex;
}
});
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: view.el,
delegate: '.x-grid-cell',
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tip) {
if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
header = grid.headerCt.getGridColumns()[grid.cellIndex];
columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);
tip.update(columnText);
}
}
}
});
解决方案
您可以使用renderer
configgridcolumn
并且在您的内部可以根据您需要显示的记录renderer
返回一个 html 标记。data-qtip
你可以在这里查看工作FIDDLE。
代码片段
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "homer@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: 'simpsonsStore',
columns: [{
text: 'Name',
dataIndex: 'name',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {
return `<span data-qtip="This is ${value}"> ${value} </span>`;
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
renderTo: Ext.getBody()
});
}
});
推荐阅读
- sql-server - 如何通过两种方式对一列进行排序
- twitter - 带有大图像的 Twitter 摘要卡未显示完整图像
- html - 网页边缘周围的空白区域
- prometheus - prometheus/client_python:如何在不重新启动的情况下分配新注册表?
- javascript - 更新:使用两个不同的分隔符加入数组中的项目
- reactjs - 调度动作类型时 Redux Saga 未触发
- c# - 求解方程以从 3 个点找到圆的中心点
- python - 是否可以根据 PostgreSQL 中另一个模式中存在的表自动生成和填充一个模式中的表?
- c - (二叉树)代码不起作用但编译时不返回错误
- html - 防止flexbox中文本换行符的宽度扩展