title: extjs gridpanel not showing scrollbars
body: <p>I am creating a page that only contains a gridpanel, I want my gridpanel to have scrollbars based on the browser size. To do this I am wrapping it in a viewport as discussed <a href="http://www.sencha.com/forum/showthread.php?45251-autoHeight-Grid-with-ScrollBar" rel="nofollow noreferrer">here</a> and making sure I specify a layout as discussed <a href="https://stackoverflow.com/questions/3817338/vertical-scrollbar-in-extjs-gridpanel">here</a>. The grid renders fine but I am not getting any scroll bars. I've tried 'fit', 'border' and 'anchor' layouts but still no luck. The code looks like this:</p>
  
  <pre><code>Ext.create('Ext.Viewport', {
      items: [{
          region: 'center',
          layout: 'fit',
          xtype: 'gridpanel',
          store: myStore,
          loadMask: true,      
          columns: [{
              header: 'Account ID',
              dataIndex: 'acct_id',
              width: 70
          }, {
              header: 'First Name',
              dataIndex: 'first_name',
              width: 120
          }, {
              header: 'Last Name',
              dataIndex: 'last_name',
              width: 120
          }, {
              xtype: 'numbercolumn',
              header: 'Account Balance',
              dataIndex: 'acct_bal',
              width: 70,
              renderer: Ext.util.Format.usMoney
          }, {
              xtype: 'numbercolumn',
              header: 'Credit',
              dataIndex: 'credit',
              width: 70,
              renderer: Ext.util.Format.usMoney
          }, {
              xtype: 'numbercolumn',
              header: 'Debt',
              dataIndex: 'debt_bal',
              width: 70,
              renderer: Ext.util.Format.usMoney
          }],
      }]
  });
  </code></pre>