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