javascript 使用 meta.tdAttr 的网格列渲染器工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18319847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grid column renderer tooltip using meta.tdAttr
提问by Tore Hanssen
I have been trying to add a tooltip that pops up when you hover over a cell in an Ext.grid.Panel.
我一直在尝试添加一个工具提示，当您将鼠标悬停在 Ext.grid.Panel 中的单元格上时会弹出该提示。
However, the parameter "meta" to the renderer function for a column does not have the tdAttr property!
但是，列的渲染器函数的参数“meta”没有 tdAttr 属性！
renderer : function(value, meta, record, row, col) {
if (value == 1 && record.data.state === 'Accepted') {
meta.tdCls = 'green';
console.log('value',value);
console.log('meta',meta);
console.log('meta.tdAttr',meta.tdAttr);
console.log('meta.style',meta.style);
meta.tdAttr = 'data-qtip="' + value + '"';
return record.data.id;
} else if (value == 1 && record.data.state === 'Initial Version') {
meta.tdCls = 'white';
return record.data.id;
} else if (value == 1) {
meta.tdCls = 'red';
return record.data.id;
} else {
return '';
}
}
sample console output:
示例控制台输出：
value 1
meta Object {tdCls: "", style: ""}
meta.tdAttr undefined
meta.style
I feel like I might be missing some setting on the grid view or the grid panel, but for that property to not even be available on the meta parameter seems strange. From the documentation:
我觉得我可能缺少网格视图或网格面板上的一些设置，但是对于该属性甚至在元参数上都不可用似乎很奇怪。从文档：
metaData : Object A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.
metaData : Object 有关当前单元格的元数据集合；可由渲染器使用或修改。可识别的属性有：tdCls、tdAttr 和 style。
采纳答案by Tore Hanssen
I have no idea why that setting was not there to begin with, but I added it manually to get around that problem:
我不知道为什么该设置一开始就不存在，但我手动添加了它以解决该问题：
meta['tdAttr'] = 'data-qtip="' + value + '"';
and it worked!
它奏效了！
回答by Nail Shakirov
I have experience with dynamically show cell tooltip in action column, should help.
我有在操作栏中动态显示单元格工具提示的经验，应该会有所帮助。
{
xtype: 'actioncolumn',
name: 'payment',
width: 70,
align: 'center',
dataIndex: 'uid',
menuDisabled: 'true',
text: 'xxx',
sortable: false,
fixed: 'true',
renderer: function (value, metadata, record) {
if (value == '0') {
metadata.tdCls = 'pay-icon';
}
else {
metadata.tdCls = 'paid-icon'
}
},
getTip: function (value, metadata, record) {
if (value == '0') {
return 'for pay';
} else {
return 'paid';
}
}
}
