Is it possible to specify the maximum width in the border layout?

Question

I have a panel defined like this:

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

Inside this panel, I have an array of elements. One element is another panel. Here is the definition of this 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 } 

The width setting on this panel is not affected. Setting maxWidth and minWidth causes a lot of extra space to be placed around the panel. Is there a way to use the flex property while maintaining the maximum width of the panel? This forced me to decide to increase the size of the image with high resolution (1920 x 1080) or not to fit the content at low resolutions (1024 x 768).

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

Answer 1

From the ExtJS documentation for the framework:

Any container using a border layout must have a child with region:'center' . The child element in the central area will always be resized to fill the remaining space not used by other regions in the layout.

Thus, explicitly setting a maxWidth on the panel does not affect, since it will be resized to fill the remaining space in the container, even if it is larger than maxWidth .

Then the solution would be to define your layout using a combination of HBox and VBox rather than a border layout so that you can use the maxWidth , minWidth and flex configurations to get the layout behavior you are looking for.

Answer 2

Therefore, for some reason, setting the area to the center causes extjs not to take into account certain size properties. When I set the region to east, this allowed the component to behave as expected.

Hope this helps someone else.