ExtJS 4.2.1 - border layout with dynamic height

Question

i need a layout something like this:

https://fiddle.sencha.com/#fiddle/21i

I need the west filter panel to be collapsable and my content panel has a dynamic height.

A possibility could also be that the panel with the boarder layout has a full height and the overflow is just scrollable...

Though i dont get a valid border layout without setting a total height to my panel.

Please help

UPDATE

A nice workaround would be appreciated too...

EDIT

a new fiddler with dynamic generated content

https://fiddle.sencha.com/#fiddle/221

Answer 1

A quick and dirty workaround is to let render the body of the dynamic panel and adjust the height of your main container accordingly. You'll need to account for anything that adds height to the center panel's body.

For example, with your code, you can add a listener like this to your border layout container:

listeners: {
    delay: 1,
    afterrender: function() {
        this.setHeight(
            this.down('[region=center]').body.getHeight()
            + this.getHeader().getHeight()
            // also account for borders, margins, etc. if needed
        );
    }
}

See your updated fiddle .

Update Toward a more robust solution

As I said in the comment, Ext4 makes it quite easy to make a panel collapsible with 'hbox' layout, and probably most other kinds.

Here's a good starter ( fiddled there ):

Ext.onReady(function() {
    Ext.widget('viewport', {
        layout: {
            type: 'hbox'
            ,align: 'stretch'
        }
        ,items: [{
            title: 'left'
            ,width: 150
            ,resizable: true
            ,resizeHandles: 'e'
            ,style: {
                borderRight: '2px solid #157FCC'
            }
            ,collapsible: true
            ,collapseDirection: 'left'
            ,defaultType: 'button'
            ,layout: {
                type: 'vbox'
                ,align: 'stretch'
            }
            ,items: [{
                text: "Foo"
            },{
                text: "Bar"
            },{
                text: "Baz"
            }]
        },{
            title: 'center'
            ,flex: 1
            ,autoScroll: true
            ,tbar: [{
                text: "Add content"
                ,handler: function() {
                    this.up('panel').add({
                        html: "<p>Lorem ipsum dolor sit amet...</p>"
                    })
                }
            }]
        }]
    });
});

Answer 2

You can use:

        layout: {
            type: 'vbox',
            align : 'stretch',
            pack  : 'start'
        }

in a container ( window, panel, ..) and:

Flex: 1

in a component within, like a grid.

Works pretty good, in my experience. ( as suggested in the layout examples from the Sencha site and Forum remarks )

Answer 3

Remove the 'border' layout and replace it with

layout: {
  type: 'hbox',
  pack: 'start',
  align: 'stretch'
},

Now you can remove the heights and it will fit dynamically