CODEWITHSUNDEEP
javascriptextjsextjs5
davids182009
davids182009

Reputation: 451

ExtJs put a tooltip to the horizontal scroll controls Tab Panel

I have a tab panel with some items inside them, when I add many elements the panel puts a horizontal movement controlers, how can i do to put a tooltip in this controls?

Tab Panel

This is the definition of my tab Panel:

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

In this tab Panel I add more panels:

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

Upvotes: 0

Views: 697

Answers (1)

Semih Gokceoglu
Semih Gokceoglu

Reputation: 1428

Maybe this is not good solution, but you can use it until you find better solution. 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'       
    });
});

Or

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

    });

Upvotes: 2

Related Questions