显示工具提示的Extjs DataView

Question

我正在使用ExtJS DataView作为我的图片库。这是我处理项目工具提示的方式。它在tpl中。

 new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="thumb-wrap" data-qtip="{shortname}">',
            '<img class="file-image" src="{thumb}" />',
        '</div>'
    '</tpl>'
 );

它工作正常，但我想为我的工具提示设置showDelay值。

有没有办法为dataview项目工具提示设置showDelay？

Answer 1

尝试像这样实现工具提示，它将为您提供所有的配置选项：

在声明网格之后添加以下内容(其中myGridPanel是您的Ext.grid.Panel)。您可能需要对其进行一些调整以满足您的需要。还要将提示从模板中删除。

myGridPanel.getView().on('render', function(view) {
    view.tip = Ext.create('Ext.tip.ToolTip', {
        target: view.el,
        delegate: view.itemSelector,
        trackMouse: true,
        minWidth: 300, 
        maxWidth: 500,
        dismissDelay: 0,
        showDelay: 800,
        renderTo: Ext.getBody(),
        listeners:{
            beforeshow: function updateTipBody(tip){
                tip.update(
                    view.getRecord(tip.triggerElement).get('shortname')
                );
            }
        }
    });
});  

Answer 2

这是不可能的："showDelay“属性不能直接从标记中设置。

来自文档：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tip.QuickTipManager

要在标记中注册快速提示，只需添加一个或多个以

- QuickTip为前缀的有效数据属性。HTML元素本身会自动设置为快速提示目标。以下是受支持属性的摘要(除非另有说明，否则为可选属性)：

遗憾的是，不支持"showDelay“属性。因此，您必须找到其他方法来实现您的quickTips。