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 2 don't have to. I tried layout : anchor as well as layout : { xtype : 'vbox', align : 'stretch', pack: 'start'} but it doesn't work,the elements in the tabpanel 1 are hidden by the tabpanel 2.

Here is the code for the panel :

var West_panel = Ext.create('Ext.Panel', {
            id : 'West_panel_id',
            region : 'west',
            header : false,
            collapsible : true,
            autoScroll : true,
            // layout : 'fit',
            layout:{
                type:"vbox",
                pack:"start",
                align:"stretch"
            },
            // autoHeight: true,
            // height : 400,
            width : 270,
            split: true,
            defaults : {
                autoScroll : true
            },
             // items: [selectPanel,treeServices]
             items: [selectPanel,tabs, tabsSouth],.....

Code for first and second tabpanel :

var tabs = new Ext.create('Ext.tab.Panel',{
    activeTab: 0,
    width : 270,
     // anchor : '100%, 25%',
    height : 400,
    // autoHeight: true,
    autoScroll : true,
    scrollable : true,
    flex : 1,
    items:......

回答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'

            }
        ]
    });

来源：https://stackoverflow.com/questions/20523424/extjs-4-1-what-layout-for-3-components-scrollable