Extjs DataView 显示工具提示答案

【问题标题】：Extjs DataView to display tooltipsExtjs DataView 显示工具提示
【发布时间】：2012-02-01 06:01:05
【问题描述】：

我正在为我的图片库使用 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？

【问题讨论】：

标签： extjs tooltip extjs4 dataview

【解决方案1】：

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

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

要在标记中注册快速提示，您只需添加一个或多个以 data- 命名空间为前缀的有效 QuickTip 属性。的HTML 元素本身会自动设置为快速提示目标。这是支持的属性摘要（可选，除非另有说明）：

很遗憾，不支持“showDelay”属性。所以你必须找到另一种方法来实现你的快速提示。

【讨论】：

【解决方案2】：

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

在声明网格后添加以下内容（其中 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')
                );
            }
        }
    });
});

【讨论】：

是的，它工作得很好。我的问题已经解决了。提前谢谢 :)