ExtJS——在展开/折叠时调整面板高度
ExtJS--adjust panel height on expand/collapse
我有一个父面板,其中有两个面板嵌套在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
}
]
}
相关文章:
- ExtJS——在展开/折叠时调整面板高度
- 如何自动调整标签的高度以适应内容
- window.open根据动态内容自动调整高度和宽度
- 如何在HTML CSS JavaScript中根据纵横比调整高度或宽度
- 使 iframe 自动调整高度
- iframe 自动调整高度大小不起作用
- Iframe内容的可调整高度(在wordpress中)
- 自动调整高度为全宽度图像过滤器
- 如何调整高度时,减少宽度
- 在使用jQuery时,紧跟在ScrollTop之后调整高度是非常不稳定的
- 画布调整宽度,但不调整高度
- JavaScript自动调整高度大小
- 在移动视图中调整高度
- 调整高度&宽度以百分比而非像素表示
- JavaScript调整高度问题
- 无法在任何 DIF 上按 % 调整高度
- 自动调整高度CSS
- iframe自动调整高度作为内容的变化
- 当子块调整高度时,内联块自动适合子块宽度
- 在CSS和JS中动态调整高度