ExtJs 将工具提示添加到水平滚动控件选项卡面板

Question

我有一个 tab panel 里面有一些项目，当我添加很多元素时，面板会放置一个水平移动控制器，我该如何在这个控件中放置一个 tooltip？

这是我的标签面板的定义：

        var tabPanel = Ext.create('Ext.tab.Panel',{
        id: 'tabTabla',
        items: [{
            title: 'list1',
            tooltip: 'list1',
            items:[tree]
        }, {
            title: 'list2',
            tooltip: 'list2',
            autoWidth : true,
            autoHeight : true,
            plain : true,
            defaults : {
                autoScroll : true,
                bodyPadding : 0
            },
            items: [{
                xtype : 'label',
                text : 'list description.',
            },
            gridV]
        },{
            title: 'list3',
            tooltip: 'list3',
            autoWidth : true,
            autoHeight : true,
            plain : true,
            defaults : {
                autoScroll : true,
                bodyPadding : 0
            },
            items: [
                    gridC
                    ]
        }]
    });

    var scrollers = Ext.select('.x-box-scroller-tab-bar').elements;
    Ext.each(scrollers, function(scroll, id) {
    scroll.title =  (id == 0 ? 'left click' : 'right click');
    });

在此选项卡面板中，我添加了更多面板：

    Ext.apply(this, {
        title: 'TITLE',
        constrain: true,
        header : {
            titlePosition : 2,
            titleAlign : 'center'
        },
        closable : false,
        x : 20,
        y : 270,
        layout : 'fit',
        animCollapse : true,
        collapsible : true,
        collapseDirection : Ext.Component.DIRECTION_LEFT,
        items: [tabPanel]
    });

Answer 1

也许这不是一个好的解决方案，但您可以使用它直到找到更好的解决方案。 Fiddle : https://fiddle.sencha.com/#fiddle/tng

var scrollers = Ext.select('.x-box-scroller-tab-bar');
Ext.each(scrollers, function(scroll, id) {
    scroll.set({
        "data-qtip": id == 0 ? 'left click' : 'right click'       
    });
});

或者

    var scrollers = Ext.select('.x-box-scroller-tab-bar').elements;
    Ext.each(scrollers, function(scroll, id) {
        scroll.title =  (id == 0 ? 'left click' : 'right click')       

    });

ExtJs 将工具提示添加到水平滚动控件选项卡面板

ExtJs put a tooltip to the horizontal scroll controls Tab Panel

javascript

extjs

extjs5