I am creating a page that contains only a grid, I want my grid to have scroll bars based on the size of the browser. To do this, I wrap it in a viewport, as discussed here, and make sure I specify the layout as discussed. The grid looks great, but I don't get any scrollbars. I tried the "fit", "border" and "anchor" layouts, but still no luck. The code is as follows:
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 }], }] });