如何在 window 大小的 TabPanel shrink/expand 中制作面板

Question

我有一个 TabPanel 布局，里面有一个 hbox 布局。 Pane1 显示了一个垂直滚动条，但没有覆盖所有项目。如何根据 window resize.

调整所有这些内容的大小

 Ext.define('MyPanel', {
        extend: 'Ext.panel.Panel',        
        layout: 'vbox',
        initComponent: function() {
            this.items = [
            {
                xtype: 'panel',
                items: [                            
                Ext.create('AddressBar')
                ]
            },
            {
                xtype: 'panel',
                layout: 'hbox',
                items: [                            
                Ext.create('MyApp.view.Panel1'),
                Ext.create('MyApp.view.Panel2')
                ]
            }                      
            ];

            this.callParent(arguments);
        }
    });

//PANEL 1 有滚动条问题

Ext.define('Panel1', {
    extend: 'Ext.panel.Panel',
    autoScroll: true,
    minWidth: 250,
    minHeight: 500,
    maxHeight: 1000,
    bodyStyle: 'padding: 10px',
    initComponent: function () {
        var thisPanel = this;
        var items = [{      
            xtype: 'panel',
            overflowY: 'auto',
            items: [
            {
                xtype: 'checkbox',
                boxLabel: 'LodeData'                
            },
            {
                xtype: 'checkboxgroup',
                id: 'group',
                labelWidth: 150,
                overflowY: 'auto',
                items: [
                { 
                    name: 'check1',
                    checked: true
                },
                { 
                    name: 'check2',
                    checked: true
                },
                { 
                    name: 'check3',
                    checked: true
                },                  
                ]                   
                layout: {
                    // align: 'stretch',
                    type: 'vbox',
                    pack: 'start'
                }
            }]
        }           
        ];
        this.items = items;
        this.callParent();
    }   

});

Answer 1

感谢@Tarabass 的详细解答。下次我设计东西时，我会记住它。现在，我通过使用 flex

解决了我的问题