即使使用“适合”布局，Ext JS Grid 也不会填充面板

Posted 2023-02-26

【中文标题】即使使用“适合”布局，Ext JS Grid 也不会填充面板

【英文标题】：Ext JS Grid doesnt fill panel even with 'fit' layout

【发布时间】：2012-03-12 13:57:46

【问题描述】：

我试图让一个网格占据面板内的整个空间，在通过这个论坛搜索后，我读到合适的布局应该有助于解决这种情况。但是，我仍然无法做到这一点。

         
            xtype:'panel',
            layout:'fit',
            items: [
                     xtype: 'grid',
                     store: 'DimensionStore',
                     id: 'dimension-grid',
                     padding: '0 5 0 5',
                     viewConfig:  emptyText: '<div style="padding:10px;">No dimensions found...</div>' ,
                     columns: [ 
                                header: 'Name', dataIndex: 'DimensionName', flex: 2 
                              ]
                     
                  ]
         

唯一可行的方法是为网格设置绝对高度，但这违背了目的，因为面板 + 网格位于可展开的窗口内，并且在展开时看起来并不好看。

【问题讨论】：

网格本身就是面板，因此您不需要一个面板来容纳另一个面板。您是否尝试过删除示例中的***面板并简单地使用适合布局的网格？

嗨，埃里克，是的，我也试过了。结果相同。

你能发一张你当前布局的截图吗？

我认为它实际上工作正常。由于没有足够的行来触发滚动条，它使用标准行高并填充它可以填充的任何空间。当您尝试加载大约 20 条虚拟记录时会发生什么？

@Armaan：这不是您的代码的样子。你从哪里得到额外的文本框？从您发布的内容看来，您有一个容器，里面有一个文本框，然后是一个面板和一个网格。您的面板布局“适合”，但您的容器呢？

【参考方案1】：

根据您向我们展示的图片，布局问题似乎与包含您的文本字段和网格的顶部“尺寸”面板有关。这里其实是负责布局的组件，而不是网格。

您可以做几件事，具体取决于您打算如何使用它。最简单的解决方案是使用“vbox”布局。 “尺寸”面板将有两个项目，一个用于具有固定高度的面板，其中包含您的文本字段，另一个包含您的 flex 为 1 的网格。这样，网格将填充剩余区域。

Ext.layout.container.VBox documentation

您还可以使用边框布局，将文本字段作为“北”区域，将网格作为“中心”区域，并使用“适合”布局，这将完成同样的事情。

Ext.layout.container.Border documentation

这一切都基于您有限的代码示例和链接图像。您可能需要提供更完整的代码示例以方便进一步的帮助。

【讨论】：

我试过你提到的 vbox 方法，它奏效了！谢谢！