Question

我有一个treegrid“templatecolumn”，它根据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" height="16" width="16"/>',
    '</tpl>' 
);

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

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

Answer 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')+'" width="25px" height="25px"/>';
        }
    }
},

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

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

您可以在此处详细了解渲染器功能：http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer

希望这会有所帮助：）

ExtJS 4.1 - XTemplate中的工具提示

1 个答案: