ExtJS - 如何将工具提示设置为 Ext.panel.Panel 中的 TAB

Question

我有一个 Ext.Tab,Panel，我在其中动态创建了多个选项卡。

每个选项卡都包含一个 Ext.panel.panel。我需要做的是在选项卡中添加工具提示。我试图做这样的事情:

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

setTabTitle: function() {

    title = 'some title';

  try {
    this.setTitle(title);

    this.getHeader().getEl().set({
        'data-qtip': title
    });
  } catch (e) {

  }
}

然而，该选项卡不是标题，因此它不会将工具提示应用于该选项卡

任何想法

编辑:

还找到了另一种方法:

this.tab.setTooltip('tool tip');

谢谢，

Answer 1

每个选项卡按钮都是 Ext.tab.Tab 类的实例。当您在标签面板中创建新面板时，您可以通过 tabConfig 选项指定标签按钮的配置。

因此在 tabConfig 选项中，您可以通过以下方式轻松指定选项卡工具提示:

    tabConfig: {                    
        tooltip: 'Tooltip text'
    }  

此代码创建新的 Ext.Tab.Panel，其中包含两个已定义工具提示的选项卡，并动态创建第三个也有工具提示的选项卡:

   var tabPanel = Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: Ext.getBody(),
        items: [{
            title: 'Foo',
            tabConfig: {                    
                tooltip: 'A Foo tab tooltip'
            }                
        }, {
            title: 'Bar',
            tabConfig: {                    
                tooltip: 'A Bar tab tooltip'
            }
        }]
    });

    var dynamiclyCreatedTab = Ext.create('Ext.panel.Panel',{
       tabConfig: {
           title: 'Dynamicly created tab',
           tooltip: 'A Dynamicly created tab tooltip'
       } 
    });

    tabPanel.add(dynamiclyCreatedTab);

参见 fiddle :https://fiddle.sencha.com/#fiddle/1q8