ExtJS:east/west 区域占用可用 space 当其他区域不存在时
ExtJS: east/west region to occupy available space when other regions are not present
我正在为我的 application.I 使用边框布局,希望在其他区域隐藏或不存在时让 east/west 区域占据可用的 space。
例如,如果有东部和中心区域,如果中心区域被隐藏,东部区域将自动占据 space 可用空间。
请提出您的想法以实现这一目标。
谢谢。
我建议巧妙地使用 flex
属性。
这是给你的Sencha Fiddle
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
}, {
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region: 'west',
xtype: 'panel',
layout: 'fit',
flex:100,
collapsible:true,
id: 'west-region-container',
layout: 'fit',
html:'Content of the west panel'
}, {
title: 'Center Region is collapsible',
region: 'center',
xtype: 'panel',
flex:100,
layout: 'fit',
collapsible:true,
html:'Content of the center'
}],
renderTo: Ext.getBody()
});
我正在为我的 application.I 使用边框布局,希望在其他区域隐藏或不存在时让 east/west 区域占据可用的 space。 例如,如果有东部和中心区域,如果中心区域被隐藏,东部区域将自动占据 space 可用空间。 请提出您的想法以实现这一目标。 谢谢。
我建议巧妙地使用 flex
属性。
这是给你的Sencha Fiddle
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
}, {
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region: 'west',
xtype: 'panel',
layout: 'fit',
flex:100,
collapsible:true,
id: 'west-region-container',
layout: 'fit',
html:'Content of the west panel'
}, {
title: 'Center Region is collapsible',
region: 'center',
xtype: 'panel',
flex:100,
layout: 'fit',
collapsible:true,
html:'Content of the center'
}],
renderTo: Ext.getBody()
});