Question

我有一个如此定义的面板：

Ext.define('E.view.portfolio.Construction', {
    extend: 'Ext.form.Panel',
    xtype: 'portfolioconstruction',
    closable: true,
    layout: 'border',
    baseCls: 'module-workspace',

    // ...

});

在该面板中，我有一个items数组。其中一个项目是另一个小组。以下是该小组的定义：

{
    region: 'center',
    xtype: 'portfoliosettings',
    itemId: 'portfolioSettings',
    title: 'Portfolio Settings',
    collapsible: true,            
    collapseDirection: 'right',
    collapsedCls: 'portfolio-settings-collapsed',            
    flex: 10,
    cls: 'module-section portfolio-settings',
    frame: true,
    padding: 0,
    margin: 0
}

在此面板上设置width无效。设置maxWidth和minWidth会导致在面板周围放置大量额外空间。有没有办法在控制面板的最大宽度的同时使用flex属性？它迫使我在高分辨率（1920 x 1080）的超大尺寸或不适合低分辨率（1024 x 768）的内容之间做出决定。

是否有某种快乐的媒介或我是否坚持这个？

Answer 1

来自border layout的ExtJS文档：

使用边框布局的任何容器必须具有region:'center'的子项。中心区域中的子项目将始终调整大小以填充布局中其他区域未使用的剩余空间。

因此，在面板上明确设置maxWidth无效，因为它将调整大小以填充容器中的剩余空间，即使它大于maxWidth。

然后，解决方案是使用HBox和VBox布局的组合来定义布局，而不是边框布局，以便您可以使用maxWidth，{{1并且minWidth配置以获取您正在寻找的布局行为。

Answer 2

因此，出于某种原因将区域设置为中心会导致extjs不遵守某些大小属性。当我将region设置为'east'时，它允许组件按预期运行。

希望这有助于其他人。

是否可以在边框布局中指定最大宽度？

2 个答案: