Javascript 具有多个列的ExtJS网格面板

需要有很多列的网格面板的帮助

面板看起来像：

我想使格栅板支架高度始终为格栅的100%。它永远不会有y/高度滚动条

我的看法是：

function createGridPanel(grid_panel_json) {
  function createDataStore(data_store_json) {
    return Ext.create('Ext.data.Store', {
        fields:data_store_json.fields,
        data:data_store_json.data
    });
  }

function getColumnsCount(columns) {
    return columns.length;
}

function calculateTableWidth(columns) {
    var tableWidth = 0;
    for (var index in columns)
    {
         var columnWidth = columns[index].width;
         if (columnWidth === -1)
         {
             tableWidth += 350;
         }
         else
         {
             tableWidth += columnWidth;
         }
    }
    return tableWidth;
}

var grid =  Ext.create('Ext.grid.Panel',
{
    autoRender: true,
    autoShow: true,
    syncRowHeight: true,
    overflowY: 'auto',
    overflowX: 'auto',
    autoHeight: true,
    store: createDataStore(grid_panel_json.data_store),
    hideHeaders: grid_panel_json.hideHeaders,
    columns: grid_panel_json.columns,
    allowDeselect: true,
    layout:
        {
            type:'fit',
            align:'stretch',
            pack:'start'
        }
});

var gridPanelHolder = new Ext.Panel(
{
    title: grid_panel_json.title,
    titleCollapse: true,
    collapseDirection: 'top',
    collapsible: grid_panel_json.collapsible,
    style:
    {
        marginBottom: '5px'
    },
    items:[
        grid
    ],
    autoHeight: true,
    autoWidth:true,
    overflowY: 'auto'
});

if (getColumnsCount(grid_panel_json.columns) > 4)
{
    grid.setWidth(calculateTableWidth(grid_panel_json.columns));
    gridPanelHolder.setAutoScroll(true);
    gridPanelHolder.doComponentLayout();
}

return gridPanelHolder;

}

有什么办法可以实现吗

尝试了很多使用自动高度溢出布局的方法，但都没有成功

因此，任何帮助都将不胜感激

ExtJS 4.2.1