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

时间:2015-04-10 13:57:02

标签: javascript html extjs

我有一个父面板,其中两个面板嵌套在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
            }
       ]
}

1 个答案:

答案 0 :(得分:0)

将“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
            }
       ]
}