Question

I’m getting a scrollbar in the Viewport, how can I remove it.

I know that is a strange situation because in the documentation we have this :

The Viewport does not provide scrolling, so child Panels within the Viewport 
should provide for scrolling if needed using the autoScroll config.

from viewport sencha doc

My Viewport :

Ext.define('MyViewport', {
   extend : 'Ext.container.Viewport',

   layout : 'border',
   padding : '5 5 5 5',
   defaults: {
       split: true,
       autoScroll : false
   },
   initComponent : function() {
       this.items = [{
         region: 'north',
         height: 70,
         width : '100%',
         split : false,
         padding : '0 0 5 0',
         items:[{
               //here some items
         }]
    },{
        region:'west',
        collapsible: true,
        width: 210,
        maxWidth : 210,
        autoScroll : false,
        items:[{
               //here some items
         }]
    },{
        region:'center',
        id : 'workspace',
        //here I add panels dynamically
    }];
    this.callParent(arguments);
      }
 });

am I missing somthing ?!

Answer 1

Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.

But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.

Try adding a layout: fit config to your viewport.

If that doesn’t handle it, add the same config to the panel component that has the scroll bars.