Extjs 4.1 What Layout For 3 Components Scrollable

I have a formPanel and two tabPanel in a Panel (region : west). My 'TabPanel 1' has dynamic height (it depends on selected comboboxes), so the height has to be automatic. TabPanel

Solution 1:

If you use for west region vbox layout, it should works as you want.

I try to setup this layout in this fiddle: https://fiddle.sencha.com/#fiddle/23c

Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [ 
            {
                xtype: 'container',
                region: 'west',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                title: 'West',
                width: 250,
                items: [
                    {
                        title: 'Form panel',
                        xtype: 'panel',
                        flex: 1
                    },
                    {
                        title: 'Tab panel 1',
                        xtype: 'tabpanel',
                        flex: 1,
                        items: {
                            xtype: 'panel',
                            autoScroll: true,
                            title: 'First Tab',
                            html: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Praesent in mauris eu tortor porttitor accumsan. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget facilisis enim ipsum id lacus. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Aliquam ornare wisi eu metus. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Pellentesque arcu. In convallis. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nulla pulvinar eleifend sem. Curabitur vitae diam non enim vestibulum interdum. Fusce suscipit libero eget elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Nunc tincidunt ante vitae massa. Fusce consectetuer risus a nunc. '
                        }
                    },
                    {
                        title: 'Tab panel 2',
                        xtype: 'tabpanel',
                        flex: 1
                    }
                ]                   
            },  
            {
                region: 'center',
                xtype: 'panel', 
                title: 'Center',
                html: 'Center content'

            }
        ]
    });