Hi all,

I am trying to setup a minimum height and a maximum height on a flexed item in a vbox.

Here is my vbox (located in the west panel of a viewport):

Code:
{
    region: 'west',
    id: 'west-panel',
    split: true,
    width: 300,
    minSize: 175,
    collapsible: true,
    margins: '0 0 0 5',
    layout:'vbox',
    border: false,
    layoutConfig: {
        align : 'stretch'
    },
    items: [
            {
                // ITEM 1
                xtype: 'form',
                autoScroll: true,
                border: false,
                flex: 1,
                height: 70,
                id: 'searchForm',
                defaultType: 'textfield',
                labelWidth: labelWidth,
                layoutConfig: {
                    labelSeparator: ''
                },
                items: geocat.getSimpleFormContent()
            },
            {
                // ITEM 2
                id: 'searchSwitch',
                html: geocat.getSimpleSearchSwitch(),
                border: false,
                height: 15
            },
            {
                // ITEM 3
                height: 340,
                layout:'fit',
                border: true,
                items: cardSec
            }
    ]
}
What exactly I am trying to achieve here is:
  • The first item should be flexible (flex) but should never be smaller than 70px.
  • The second item should be fixed to 15px.
  • The third item should be flexible but should never be higher 340px in heigth
This would mean that if the resolution is increased in height then both item 1 and 3 would grow until item 3 reaches 340px then only item one could carry on growing.

On the contrary when the resolution is decreased in height then both items would shrink until item 1 reaches 70px in height then only item 3 would carry on shrinking.

Any idea on how to achieve this? How do you set up a minHeight and maxHeight on flex elements??

Online example: http://sandre.eaufrance.fr/AtlasCatalogue_alpha/

Thanks for your answers!