将工具提示添加到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?

我应该创建哪个grid事件？如何访问我的悬停行值并显示在工具提示？如何显示价值的好方法，可以使用像 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屋！