ExtJ将工具提示添加到网格单元格文本中

ExtJs add tool tip to grid cell text

本文关键字：单元格 文本 网格 工具提示 添加 ExtJ      更新时间：2023-09-26

我正在使用Extjs创建UI。所以我创建了带有柱的网格。我的任务是将工具提示添加到一些单元格中，但仅限于部分文本。我试着使用meta.tdAttr = 'data-qtip="Activity is in use"';，看起来它很有效，但在整个单元格上设置了工具提示，而我只想在一些文本上使用。

这是我的认识：

                        {
                            hideable : false,
                            width : 200,
                            flex : 1,
                            dataIndex : 'name',
                            text : 'Name',
                            renderer :  function(value, meta, record) {
                                meta.tdCls += ' '
                                        + this.getValidation()
                                                .getHighestLevelCls(
                                                        record.modelType,
                                                        record.id);
                                var inUseClass = '';
                                if (record.get('descendants').length > 0) {
                                    meta.tdAttr = 'data-qtip="Activity is in use"'; // here is tool tip setter
                                    inUseClass = Glyphs
                                            .getIconClass('dot-circle-o');
                                } else {
                                    inUseClass = Glyphs
                                            .getIconClass('circle-o');
                                }
                                return Glyphs.wrapClass(inUseClass,
                                        'font-size:10; color:black;',
                                        '  ')
                                        + value;
                            }
                        }

正如你在单元格中看到的，我打印Glyph（它是一种被解释为文本的图标，取自AwesomeFonts.com）+value（文本值），所以当我用鼠标悬停Glyth时，我需要显示工具提示。也许有人能给我建议什么解决方案？

您可以尝试从渲染器返回<span>，将所有属性应用于它：

renderer: function(value) {
    return '<span data-qtitle="QTip Example" data-qwidth="200" '+
           'data-qtip="This is a quick tip from a custom renderer!">'+
            value+'</span>';
}},

这里有一把小提琴。（我尝试过使用普通文本，但概念类似）

相关文章：