4

次のように定義されたパネルがあります。

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

    // ...

});

そのパネル内に、items 配列があります。アイテムの1つは別のパネルです。そのパネルの定義は次のとおりです。

{
    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

From the ExtJS documentation for the border layout:

Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.

So, explicitly setting a maxWidth on the panel has no effect, as it will be resized to fill the remaining space in the container, even if that is larger than the maxWidth.

The solution, then, would be to define your layout using a combination of HBox and VBox layouts rather than a border layout, so that you can use maxWidth, minWidth, and flex configs to get the layout behavior you're looking for.

于 2013-08-12T15:00:29.713 に答える
1

そのため、何らかの理由で領域を中央に設定すると、extjs が特定のサイズ プロパティを尊重しなくなります。リージョンを「東」に設定すると、コンポーネントが期待どおりに動作するようになりました。

これが他の誰かに役立つことを願っています。

于 2013-08-12T14:43:59.383 に答える