ExtJS 4.1 - XTemplate 中的工具提示

Posted 2023-02-26

【中文标题】ExtJS 4.1 - XTemplate 中的工具提示

【英文标题】：ExtJS 4.1 - Tooltip within XTemplate

【发布时间】：2012-06-21 16:10:12

【问题描述】：

我有一个树形网格“模板列”，它根据 XTemplate 中的条件显示图像。

但是，我还希望在鼠标悬停图像时显示 html 格式的工具提示。我已经通过渲染器中的 ext:qtip metatdata 属性使用 Ext JS 3.x 完成了此操作，但无法弄清楚如何使用 tpl 在 Ext JS 4.1 中执行此操作，并且在我的搜索中没有找到任何内容。

这是我必须根据记录值显示图像的内容：

var myTemplate = new Ext.XTemplate( 
    '<tpl if="p &gt; 0">',
        '<img src="exclamation.gif"  />',
    '</tpl>' 
);

var schedTree = Ext.create('Ext.tree.Panel', 
    ...
    columns:[
         header:' ', dataIndex:'p',  xtype:'templatecolumn', tpl:myTemplate 
    ]

有没有人这样做或有什么建议？有一个更好的方法吗？谢谢

【参考方案1】：

这不是一种使用 XTemplate 的方法，但这个方法对我有用：

    text : 'Zdj', 
    width: 40, 
    align : 'center', 
    dataIndex : 'Name', 
    sortable : false, 
    resizable: false,
    renderer: function (v, m, r) 
        if(r.get('leaf')==true) 
            m.tdAttr = 'data-qtip="<img src=services/Images.ashx?id='+r.get('id')+' width=60px height=60px>"';
            return '<img src="services/Images.ashx?id='+r.get('id')+'"  />';
        
    
,

在我的示例中，我在工具提示中显示了更大的图像，但显示 HTML 格式的工具提示没有问题。 您可以向渲染器添加条件，我认为 XTemplate 可以做的更多。

您的小图像应该返回行和工具提示内容到 m.tdAttr。

您可以在此处阅读有关渲染器功能的更多信息：http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer

希望这会有所帮助:)

【讨论】：

感谢您提供此替代解决方案。我最终在 sencha.com 上发布了我的问题并得到了答案：sencha.com/forum/… 抱歉，我直到现在才更新这篇文章。

@Alan 没问题 :) 有人喜欢 XTemplate，有人喜欢渲染器。顺便说一句，有用的链接。