extj4 网格不适合容器面板

Question

我有一个包含数据的网格，包含在一个面板中，该面板还包含一个标题和一个较小的摘要网格。 该面板具有适合布局的布局，因此标题和第一个网格（即摘要网格）显示得很好。但是有问题的网格的记录比屏幕上显示的要多，并且它的组件高度没有调整到面板的大小，面板的大小总是适合浏览器窗口的高度。

我想要的是网格组件的高度，就像面板一样，调整到它的父级，这样网格体内的滚动条就会显示出来。

我的代码与此类似（initComponent 是 Ext.panel.Panel 的扩展）： （此代码中的标题表示摘要网格）

initComponent: function (config) {
    var config = {
        border: false,
        hidden: false,
        hideMode: "display",
        padding: '5',
        layout: "fit"
    }

    Ext.apply(this, Ext.apply(this.initialConfig, config));
    this.callParent(arguments);

    title = Ext.create("Ext.panel.Panel", {
        html: '<h2>title</h2>',
        padding: '5',
        border: false
    });

// the stores for the grids are created here
    var storeHdr = DataStoreFactory.CreateStore("GetHeaderP", DataStoreFactory.fieldsCollection.Default);
    var storeBdy = DataStoreFactory.CreateStore("GetBodyP", DataStoreFactory.fieldsCollection.Default);

    var grdHeader = Ext.create("Ext.grid.Panel", {
        store: storeHdr,
        columns: getHeaderColumns(), 
        columnLines: true,
        autoHeight: false,
        autoWidth: false,
        enableHdMenu: false,
        enableColumnMove: false,
        enableColumnResize: false,
        disableSelection: true,
        trackMouseOver: false,
        sortable: false
    });

    var grdBody = Ext.create("Ext.grid.Panel", {
        id: id,
        store: storeBdy,
        columns: getBodyColumns(), 
        columnLines: true,
        autoHeight: false,
        autoWidth: false,
        autoScroll: true,
        scroll: "vertical",
        enableColumnMove: false,
        enableColumnResize: false,
        enableHdMenu: false,
        trackMouseOver: false,
        disableSelection: true
    });
},

    var headerGridContainer = Ext.create("Ext.panel.Panel", {
        layout: "fit",
        border: false,
        items: [grdHeader]
    });
    var bodyGridContainer = Ext.create("Ext.panel.Panel", {
        layout: "fit",
        border: false,
        items: [grdBody]
    });

    this.add(title);
    this.add(headerGridContainer);
    this.add(bodyGridContainer);
    storeHdr.load();
    storeBdy.load();
    this.doLayout();
}

我希望有人可以帮助我解决这个问题。提前致谢

edit - 截屏它是如何以及应该如何。实时数据被删除或抹掉，因为它是私有的并且与问题无关。

原来是这样的

应该是这样的

Answer 1

您以错误的方式使用布局。首先，您的主容器具有“适合”布局，当您内部有单个项目时应该使用该布局 - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit - 并且您的项目很少。

第二，尽量避免过度嵌套。您将网格包装成面板，然后将这些面板放入容器中。这有什么原因吗？

请张贴您拥有的和想要拥有的屏幕截图，我们将帮助您确定为此需要使用的布局。

更新：

尝试在您的主容器中使用layout: 'hbox'。如果您希望主（底部）网格填充屏幕的其余部分，请指定flex: 1。儿子基本上你会有类似的东西（在你的主容器中）：

{
   layout: 'hbox',
   ..
   items: [{
      xtype: 'panel', // header
      height: 100, 
   },
   {
      xtype: 'grid', // first grid
      height: 200
   },
   {
      xtype: 'grid', // second grid
      flex: 1
   }]
}