CODEWITHSUNDEEP
javascriptextjs
jeffkolez
jeffkolez

Reputation: 648

ExtJS TabPanel missing scroll bar in ViewPort

I have a ViewPort that I want to open a number of tabs. One of my tabs is really long and should scoll off the bottom of the page. However, the scrollbar is missing from the side.

Here's my Viewport setup:

var viewport = new Ext.Viewport({
    layout:'border',
    enableTabScroll:true,
    deferredRender:true,
    items:[
        new Ext.BoxComponent({ // raw
            region:'north',
            el: 'north',
            height:32
        }),{
            region:'west',
            id:'west-panel',
            title:'West',
            split:true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: false,
            margins:'0 0 0 5',
            layout:'accordion',
            deferredRender: true,
            layoutConfig:{
                animate:true
            },
            items: [{
                contentEl: 'west',
                title:'Navigation',
                border:false,
                collapsible: false,
                iconCls:'nav'
            }]
        },
        new Ext.TabPanel({
            region:'center',
            id:'center',
            activeTab:0,
            items:[{
                contentEl:'center1',
                title: 'Close Me',
                closable:true,
                layout:'fit',
                autoScroll:true
            }]
        })
     ]
});

And here's my add tab code:

Ext.get("addplace").on('click', function() {
    centerTabs = Ext.getCmp('center');
    tab = centerTabs.add(new Ext.TabPanel({
        iconCls: 'tabs',
        id: 'add_place_tab',
        autoLoad: {url: '/admin/addplace', scripts : true,},
        title: 'Add Place',
        loadMask: false,
        closable:true
    }));
    centerTabs.setActiveTab(tab);
});

Thanks in advance!

Upvotes: 6

Views: 19378

Answers (1)

Crescent Fresh
Crescent Fresh

Reputation: 116980

In your top code, try setting the autoScroll property to true:

new Ext.TabPanel({
    region:'center',
    id:'center',
    activeTab:0,
    defaults:{ autoScroll:true }, // here
    items:[{
        contentEl:'center1',
        title: 'Close Me',
        closable:true,
        layout:'fit',
        autoScroll:true
    }]
})

This way all the tabs you add later will have autoScroll automatically set to true.

Upvotes: 14

Related Questions