extjs - 向图像添加工具提示

Question

不明白为什么我的代码不起作用，有什么方法可以使用 extjs 在图像上显示工具提示吗？

var img = Ext.create('Ext.Img', {
        src : 'img/ampoule.png',
        width : 30
});

var tip = Ext.create('Ext.tip.ToolTip', {
    target: img.getEl(),
    html: 'tooltip'
});

我的图像在像这样的树面板的停靠项目中:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        fieldLabel: 'Search',
        /*****code code code everywhere*****/
        }
    ,
    img
   ]
}]

Answer 1

问题可能是当您尝试将工具提示添加到图像组件的元素时，您的图像组件已创建但未呈现到页面内容中。

尝试在图像组件渲染后添加工具提示:

var img = Ext.create('Ext.Img', {
        src: 'http://www.sencha.com/img/v2/logo.png',
        width: 300,
        renderTo: Ext.getBody(),
        listeners: {
            afterrender: function(c) {
                Ext.create('Ext.tip.ToolTip', {
                    target: c.getEl(),
                    html: 'tooltip'
                });
            }
        }
});

摆弄示例:https://fiddle.sencha.com/#fiddle/6ta