ExtJS - 将工具提示添加到Panel的标题中

Question

我正在开发一个使用Ext.panel.Panel控件的应用程序.该面板有一个主体和一个标题.我需要做的是在面板的标题中添加工具提示(只是文本)(只有标题而不是正文)

我正在尝试这个:

    listeners: {
    render: function () {
        this.getEl().dom.title = 'my custom tool tip';
    }
},

但它只适用于身体,而不是头部.你知道怎么做吗？我正在使用Ext 4.2.1

编辑:

这就是我试图显示工具提示的方式

Ext.define('XXX.XXX.XXX.MyCustomPanel', {
extend: 'Ext.panel.Panel',

setMyTitle: function() {
    var ds = this.getDataSource();

    try {
        this.setTitle(ds.getCustomTitle());
        // Add tooltip where tooltip = ds.getCustomTitle();

    } catch (e) {

    }
},

谢谢,安吉洛

Answer 1

您可以使用面板的标头配置中的autoEl配置为标头的基础HTML元素配置属性:

header: {
    autoEl: {
        title: 'This is a tooltip'
    }
}

或者,如果您想使用QuickTips:

header: {
    autoEl: {
        'data-qtip': 'This is a tooltip'
    }
}

也看到这个小提琴.

编辑: 在面板已经渲染后应用工具提示(调整为您的代码):

setMyTitle: function() {
    var ds = this.getDataSource(),
        title = ds.getCustomTitle();

    try {
        this.setTitle(title);
        // again, obviously just one out of the two attributes
        this.getHeader().getEl().set({
            'title': title,
            'data-qtip': title
        });
    } catch (e) {

    }
}