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

Question

我正试图让一个网格占据一个面板内的整个空间，在搜索完这个论坛后，我读到一个合适的布局应该有助于这样的情况。但是，我仍然遇到问题。

         {
            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 
                              }]
                     }
                  }]
         }

它的唯一工作方式是为网格设置一个绝对高度，但这会失去目的，因为面板+网格位于一个可扩展的窗口内，当它扩展时看起来并不好看。

Answer 1

根据您向我们展示的图片，看起来布局问题在于包含文字字段和网格的顶部“尺寸”面板。这实际上是负责布局的组件，而不是网格。

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

Ext.layout.container.VBox documentation

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

Ext.layout.container.Border documentation

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