Javascript Extjs 4.1 3个可滚动组件的布局是什么

我在一个面板中有一个formPanel和两个tabPanel（

region:west

）。我的“TabPanel 1”具有动态高度（取决于选定的组合框），因此高度必须是自动的。TabPanel 2不必这样做。我尝试了

layout:anchor

以及布局：

{xtype:'vbox'，align:'stretch'，pack:'start'}

，但它不起作用，tabpanel 1中的元素被tabpanel 2隐藏

以下是面板的代码：

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],.....

第一个和第二个选项卡面板的代码：

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:......

---

如果您用于west region

vbox

layout，它应该可以按照您的需要工作

我尝试在这个小提琴中设置此布局：

---

如果您用于west region

vbox

layout，它应该可以按照您的需要工作

我尝试在这个小提琴中设置此布局：

     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'

            }
        ]
    });