ExtJS网格面板有很多列

Question

需要有大量列的网格面板的帮助。

面板看起来像：

我想使网格面板支架高度始终为“100％”网格。它永远不会有“y / height”滚动条。

我的观点：

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;

}

任何想法我如何实现它？

尝试了很多带有autoHeight溢出的布局，但没有一个工作。

所以任何帮助都将非常感谢！

ExtJS 4.2.1