ExtJS TabPanel missing scroll bar in ViewPort

extjs, javascript

Solution

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`.

Problem

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!

Original source