0

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

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

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

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

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

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

4

1 回答 1

0

这不是使用 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')+'" width="25px" height="25px"/>';
        }
    }
},

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

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

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

希望这可以帮助 ：）

于 2012-07-12T14:36:58.913 回答