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

Question

我在一个面板 ( region : west ) 中有一个 formPanel 和两个 tabPanel。我的“TabPanel 1”具有动态高度(它取决于所选的组合框)，因此高度必须是自动的。 TabPanel 2 不必这样做。我试过layout : anchor以及布局:{ xtype : 'vbox', align : 'stretch', pack: 'start'}但它不起作用，选项卡面板1中的元素被选项卡面板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:......

Answer 1

如果您使用西部地区vbox布局，它应该按照您的意愿工作。

我尝试在这个 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'

            }
        ]
    });