the code was doing a calculation for the height based on rows which was not good. took that out and left the defaults and it works fine.

orderDetailsGrid = Ext.create('Ext.grid.Panel', {
id: 'orderDetailsModel',
width: gridMaxwidth,
store: orderTestDetStore,
disableSelection: false,
frame: false,
border: true,
stripeRows: true,
columnLines: true
/////////////////////////////////
var orderDetailPanel = Ext.create('Ext.panel.Panel',
{
title: orderDetailTitle,
id: 'orderDetailPanelId',
width: gridMaxwidth,
collapsible: true,
renderTo: 'orderDetailsDiv',
items: [orderDetailsGrid]