CODEWITHSUNDEEP
extjs
BentOnCoding
BentOnCoding

Reputation: 28208

Is it possible to specify a max width in a border layout?

I have a panel defined like so: 

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

    // ...

});

Inside that panel, I have an items array. One of the items is another panel. Here is the definition of that panel: 

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

Setting width on this panel has no effect. Setting maxWidth and minWidth causes a lot of extra space to be placed around the panel. Is there any way to use the flex property while still controlling the maximum width of the panel? It's forcing me to make the decision between being oversized at high resolutions (1920 x 1080) or not fitting the content at low resolutions (1024 x 768).

Is there some kind of happy medium or am I stuck with this?

Upvotes: 4

Views: 2004

Answers (2)

hopper
hopper

Reputation: 13400

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.

Upvotes: 3

BentOnCoding
BentOnCoding

Reputation: 28208

So for some reason setting the region to center causes extjs to not respect certain size properties. When I set region to 'east' it allowed the component to behave as expected.

Hope this helps someone else.

Upvotes: 1

Related Questions