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);

见小提琴：https://fiddle.sencha.com/#fiddle/1q8