ExtJS TabPanel missing scroll bar in ViewPort

Question

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!

Answer 1

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.