How do I fit a grid within a viewport and have the grid display a vertical scrollbar?

Question

I am trying to fit a grid within a viewport which look fine however as soon as I get more record than the page can display some of the records are no longer visible and no scroll bar is display vetically however the horizontal bar is displayed as expected ?

I have tested this in IE, Firefox and Chrome and I get the same behaviour so I belive that I am mising some kind of setup.

    var grid4 = Ext.create('Ext.grid.Panel', {
    title: 'My Title',
    id:'button-grid',
    store: getLocalStore(),
    layout:'fit',
    columns: [
        { text : 'A', width: 50,dataIndex: 'a', sortable: true},
        { text : 'B',flex: 1, dataIndex: 'b', sortable: true},
        { text : 'C Name',width: 120, dataIndex: 'c', sortable: true},
        { text : 'D',width: 100, dataIndex: 'd', sortable: true},
        { text : 'E',width: 50, dataIndex: 'e', sortable: true},
        { text : 'F',width: 70, dataIndex: 'f', sortable: true},
        { text : 'G info',width: 60, dataIndex: 'g', sortable: true},
        { text : 'H Address',flex: 1, dataIndex: 'h', sortable: true},
        { text : 'I',width: 80, dataIndex: 'i', sortable: true},
        { text : 'J by',width: 80, dataIndex: 'j', sortable: true},
        { text : 'K Date',width: 90, dataIndex: 'k', sortable: true}
    ],
    columnLines: true,
    selModel: selModel,
    iconCls: 'icon-grid',
    // inline buttons
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        },
        items: [{
            minWidth: 80,
            text: 'remove'
        },{
            minWidth: 80,
            text: 'Disable'
        }]
    }, {
        xtype: 'toolbar',
        items: [{
            text:'Click here',
            tooltip:'Add a new row',
            iconCls:'add',
            handler : function(){
                win.show();
            }
        }]
    }]
});



// viewport
Ext.onReady(function(){
Ext.QuickTips.init();

var application = new Ext.Viewport({
    renderTo: document.body,
    layout:'fit',
    items: [{
        region: 'center',
        frame: true,
        border: false,
        items: grid4
    }]
});    

Thanks

Answer 1

You're over-nesting the grid, either:

a) Make the grid be the first child of the viewport. b) Add a layout fit to the first child of the viewport.

a is the better option.

Answer 2

Set the autoScroll property for yout grid panel:

autoScroll: true

By default, this property's value is false. Enabling this property adds overflow:'auto' on the components layout element and show scroll bars automatically when necessary.