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配置中的header配置为标头的基础HTML元素配置属性：

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

或者，如果您想使用QuickTips：

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

另见fiddle。

修改面板已经渲染后应用工具提示（根据您的代码进行调整）：

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) { } }

Answer 2

您应该创建Ext.tip.ToolTip并将其分配给标题：

var tip = Ext.create('Ext.tip.ToolTip', {
    target: 'clearButton',
    html: 'Press this button to clear the form'
});

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.tip.ToolTip

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

2 个答案: