将工具提示添加到 extjs 网格以显示有关该行的完整信息 [英] add tooltip to extjs grid to show complete information about that row

问题描述

我有一个 gridview，它附有一个包含一些字段的模型.但是在我的网格中，我只显示一个字段，而我想要的是当我的鼠标悬停在网格行上时，工具提示 将出现并显示其他字段的值.

I had a gridview, it attached with a model that have some fields. But in my grid i just show one field, and what i want is when my mouse hover to the grid row, tooltip will appear and show the other fields value.

我该怎么做?有人做过吗?

How can i do this? Anybody ever done this?

我应该创建什么网格事件工具提示?如何访问我的悬停行值并将其显示在工具提示上?tooltip 是否可以使用 xpanel 之类的项目来显示值，或者唯一的方法是使用 html?

What grid event that I should create the tooltip? How can I access my on hover row value and show it on the tooltip? How the nice ways to show the value, can tooltip using item like xpanel or something, or the only way is using html?

请帮帮我.提前致谢:)

Please help me. Thanks in advance :)

推荐答案

在网格列配置中使用渲染器.编写一个函数，该函数将返回该渲染器函数映射的预期值.

Use renderer in grid columns config. write an function which will return the expected value to that renderer function mapping.

示例工作示例:

columns: [{
           text     : 'Device Name'
           ,dataIndex: 'name'
           ,renderer : function(value, metadata,record) {
                                    return getExpandableImage(value, metadata,record);
                    }
           }]



function getExpandableImage(value, metaData,record){
    var deviceDetail = record.get('deviceName') + " " + record.get('description');
    metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';
    return value;
}

这是你需要在工具提示中显示数据的地方 (metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';)

This is the place (metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';) where you need to show data in tooltip

这篇关于将工具提示添加到 extjs 网格以显示有关该行的完整信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！