4

我有一个这样定义的面板：

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) 的内容之间做出决定。

是否有某种快乐的媒介，还是我坚持这一点？

4

2 回答 2

3

来自边界布局的 ExtJS 文档：

任何使用 Border 布局的 Container都必须有一个带有region:'center'. 中心区域中的子项将始终调整大小以填充布局中其他区域未使用的剩余空间。

因此，在面板上显式设置 amaxWidth没有任何效果，因为它将调整大小以填充容器中的剩余空间，即使它大于maxWidth.

那么，解决方案是使用HBox和VBox布局的组合而不是边框​​布局来定义您的布局，以便您可以使用maxWidth、minWidth和flexconfigs 来获得您正在寻找的布局行为。

于 2013-08-12T15:00:29.713 回答
1

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

希望这对其他人有帮助。

于 2013-08-12T14:43:59.383 回答