ExtJS——在展开/折叠时调整面板高度

ExtJS--adjust panel height on expand/collapse

本文关键字:调整 高度 ExtJS 折叠      更新时间:2023-09-26

我有一个父面板,其中有两个面板嵌套在vbox布局中。顶部面板可垂直折叠。当它折叠时,我希望下面板调整它的高度。

//nested panel code
{           
        xtype:"panel",
        layout:"border",
        items:[     
         {
            region: 'west',
            xtype: 'panel',
            autoScroll:true,
            /*collapsible:true,
            collapseDirection:"top",*/
            style:{"background-color":"white"},
            layout: {type: 'vbox', align: 'stretch'},
            width: 400,
            items: [
            {
                xtype: 'panel',         
                layout: "fit",
                title: 'Members',
                collapsible:true,
                collapseDirection:"top",
                items: [{xtype: 'app_chart_memberschart', height: 350}]
            }, {
                xtype: 'panel',
                layout: 'fit',
                title: 'Users',
                height:"auto",//no effect
                items: [{xtype: 'app_chart_userschart', height: 220}]//need this panel to adjust height once Members panel is collapsed
            }
       ]
}

将"flex"属性添加到子面板中。

{           
        xtype:"panel",
        layout:"border",
        items:[     
         {
            region: 'west',
            xtype: 'panel',
            autoScroll:true,
            /*collapsible:true,
            collapseDirection:"top",*/
            style:{"background-color":"white"},
            layout: {type: 'vbox', align: 'stretch'},
            width: 400,
            items: [
            {
                xtype: 'panel',
                flex: 1,
                layout: "fit",
                title: 'Members',
                collapsible:true,
                collapseDirection:"top",
                items: [{xtype: 'app_chart_memberschart', height: 350}]
            }, {
                xtype: 'panel',
                flex: 1,
                layout: 'fit',
                title: 'Users',
                height:"auto",//no effect
                items: [{xtype: 'app_chart_userschart', height: 220}]//need this panel to adjust height once Members panel is collapsed
            }
       ]
}