Layout extj4网格不'；t安装在集装箱面板中

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

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

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

initComponent:函数（配置）{
变量配置={
边界：错，
隐藏：假，
隐藏模式：“显示”，
填充：“5”，
布局：“适合”
}
Ext.apply（this，Ext.apply（this.initialConfig，config））；
this.callParent（参数）；
title=Ext.create（“Ext.panel.panel”{
html:“标题”，
填充：“5”，
边界：假
});
//网格的存储在此处创建
var storeHdr=DataStoreFactory.CreateStore（“GetHeaderP”，DataStoreFactory.fieldscolection.Default）；
var storeBdy=DataStoreFactory.CreateStore（“GetBodyP”，DataStoreFactory.fieldscolection.Default）；
var grdHeader=Ext.create（“Ext.grid.Panel”{
商店：storeHdr，
列：getHeaderColumns（），
专栏：没错，
自动高度：false，
自动宽度：false，
enableHdMenu:false，
enableColumnMove:false，
enableColumnResize:false，
disableSelection:正确，
trackMouseOver:false，
可排序：false
});
var grdBody=Ext.create（“Ext.grid.Panel”{
id:id，
商店：storeBdy，
列：getBodyColumns（），
专栏：没错，
自动高度：false，
自动宽度：false，
autoScroll：是的，
滚动：“垂直”，
enableColumnMove:false，
enableColumnResize:false，
enableHdMenu:false，
trackMouseOver:false，
禁用选择：true
});
},
var headerGridContainer=Ext.create（“Ext.panel.panel”{
布局：“适合”，
边界：错，
项目：[grdHeader]
});
var bodyGridContainer=Ext.create（“Ext.panel.panel”{
布局：“适合”，
边界：错，
项目：[grdBody]
});
本条增补（标题）；
添加（headerGridContainer）；
添加（bodyGridContainer）；
storeHdr.load（）；
storeBdy.load（）；
这个是doLayout（）；
}

我希望有人能帮我。提前谢谢

编辑-屏幕截图如何，它应该如何。实时数据被删除或删除，因为它是私有的，与问题无关

事情就是这样

---

应该是这样的

您以错误的方式使用布局。首先，你的主容器有一个“适合”的布局，当你有一件物品在里面时应该使用这个布局，而你只有很少的物品

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

请发布你拥有的和你想要的屏幕截图，我们将帮助你找出你需要使用的布局

更新：

尝试在主容器中使用

布局：“hbox”

。如果希望主（底部）网格填充屏幕的其余部分，请为其指定

flex:1

。儿子，基本上你会有类似的东西（在你的主容器中）：

---

我添加了截图。我希望这足够清楚。在第一张图片中，网格边框线一直延伸到面板的底部边框之外，而在第二张图片中（应该是这样的），网格面板的底部边框在外部面板的底部边框上方大约五个像素处结束。你不是指vbox而不是hbox吗？不管怎么说，不管我选择哪种布局，我总是遇到同样的问题…：（（顺便说一句，我确实移除了包装面板）我没有设置包含标题和两个网格的面板的布局，也没有计算第二个网格的高度。

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();
}

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