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

我希望有人可以帮助我。提前致谢

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

how it is 这是怎么回事。

how it should be 这是应该如何

Answer 1

您正在以错误的方式使用布局。首先，你的主要容器有布局'fit'，当你有单个项目时可以使用它 - 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
   }]
}

extj4网格不适合容器面板

1 个答案: