使用meta.tdAttr的网格列渲染器工具提示
Grid column renderer tooltip using meta.tdAttr
我一直在尝试添加一个工具提示,当您将鼠标悬停在Ext.grid.Panel.中的单元格上时,该工具提示会弹出
但是,列的渲染器函数的参数"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 '';
}
}
示例控制台输出:
value 1
meta Object {tdCls: "", style: ""}
meta.tdAttr undefined
meta.style
我觉得我可能在网格视图或网格面板上缺少了一些设置,但该属性甚至在元参数上都不可用,这似乎很奇怪。来自文件:
元数据:对象关于当前单元格的元数据的集合;可以由渲染器使用或修改。公认的属性有:tdCl、tdAttr和style。
我不知道为什么一开始没有这个设置,但我手动添加了它来解决这个问题:
meta['tdAttr'] = 'data-qtip="' + value + '"';
它成功了!
我有在操作列中动态显示单元格工具提示的经验,应该会有所帮助。
{
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';
}
}
}
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- d3.js用按钮更新条形图工具提示
- ExtJ将工具提示添加到网格单元格文本中
- Extjs 3.4 中属性网格行值的工具提示 /Qtip(鼠标悬停)
- 剑道ui工具提示在网格中的定位问题
- ExtJS 4.2.1 - 选项卡面板中的网格 - 工具提示停止工作
- 带有工具提示的 ExtJS 4.2.1 网格字段
- 如何将工具提示 z 索引设置为大于剑道网格标题
- 如何为剑道网格列菜单显示剑道工具提示
- 使用meta.tdAttr的网格列渲染器工具提示
- D3(具有引导程序网格布局)-工具提示位置关闭
- 在层次结构剑道网格中的子网格上应用工具提示
- 在ExtJS4网格/工具提示中渲染图像
- 重叠的工具提示在Extjs网格
- 我可以改变工具提示'的默认动作在MVC中的剑道UI网格
- 剑道 UI - 网格中的工具提示
- HTML/CSS/JS/jQuery 需要通过键控网格的工具提示