title: Panel leaving white space when Scrollbar appears
body: <p>I'm building an application using Ext.js, and I built a grid panel, and I'm loading data every 14 seconds. When the scrollbar appears on the panel, it appears an white space that I'm trying to remove but I don't know how, I already tried to overwrite the ID that contains the timeline and change the color, but it didn't work because Ext.js generated the CSS code again and every changes disappeared.</p>
  
  <p><a href="https://i.stack.imgur.com/KEtZJ.png" rel="nofollow noreferrer">Demo</a><br>
  <a href="https://i.stack.imgur.com/NGJGc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NGJGc.png" alt="enter image description here"></a></p>
  
  <p>Is it possible to hide this white space?</p>
  
  <p>My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Ext.define('ES.view.Layout.Menu.Menu', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.timelineBar',
    controller: 'menu',
    viewModel: 'menu',
    autoScroll: true,
  
    title: 'Timeline',
    bodyStyle: 'background: #2b5876;',
    store: {
      type: 'timeline'
    },
    columns: {
      border: false,
  
      defaults: {
        hoverCls: ''
      },
  
      items: [{
          text: locale.time,
          flex: 1,
          dataIndex: 'time',
          align: 'center',
          height: 60
        },
        {
          text: locale.address,
          dataIndex: 'address',
          flex: 1,
          align: 'center',
          height: 60
  
          listeners: {
  
            click: 'onItemClick'
  
          },
        },
        {
          text: locale.dir,
          dataIndex: 'dir',
          flex: 1,
          align: 'right',
          height: 60
  
        }
      ]
    }
  });</code></pre>
  </div>
  </div>
  </p>