How do I fit a grid within a viewport and have the grid display a vertical scrollbar ?
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 
How do I fit a grid within a viewport and have the grid display a vertical scrollbar ?
===

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 