Question

我在面板中有一个formPanel和两个tabPanel（region : west）。我的“TabPanel 1”具有动态高度（取决于所选的组合框），因此高度必须是自动的。 TabPanel 2不必。我尝试了layout : anchor以及布局：{ xtype : 'vbox', align : 'stretch', pack: 'start'}但它不起作用，tabpanel 1中的元素被tabpanel 2隐藏。

enter image description here 以下是面板的代码：

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

第一个和第二个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:......

Answer 1

如果您使用西部地区vbox布局，它应该可以正常工作。

我尝试在这个小提琴中设置这个布局：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'

            }
        ]
    });

Extjs 4.1可滚动的3个组件的布局

1 个答案: