我在 ExtJS4 中工作。我被困在我想自动调整边框布局东部区域高度的位置。实际上我的要求是根据其中的子元素内容自动增加任何区域的高度。我尝试了很多，但没有找到解决方案。请给我一些建议。
在我的代码中，我只是测试一个简单的代码，其中包含东部地区的 5 个面板，显示了这四个面板。第五个面板不显示，如何让它可见？我只是使用示例代码作为引用。
这是我的视口(viewport)代码:
Ext.define('Am.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id:'viewportId',
alias:'widget.Viewport',
autoScroll:true,
// closable:true,
items: [
{
region:'north',
items:[
{
xtype:'panel',
flex:.2,
title:'north region',
html:'<p>north region'
}
]//end of items
},
{
region:'west',
id:'westId',
//margins:'0 5 5 5',
flex:.3,
//layout:'accordion',
items:[
{
title:'This day in a history',
xtype:'Content'
}
]//end if items
},// end of region west
{
//title:'center',
region:'center',
id:'centerId',
//html:'center region',
items:[
]//End of itmes
},// end of region center
{
region:'east',
id:'eastId',
//margins:'0 5 0 5',
flex:.3,
//layout:'accordion',
items:[
{
xtype:'panel',
title:'panel1',
html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel2',
html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel3',
html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel4',
html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel5',
html:'good bye'
},
]//end if items
},
{
//title:'South',
region:'south',
id:'southId',
items:[{
xtype:'panel',
title:"footer",
html:'footer '
}]
},//mainMenu // used mainMenu when you are using mainMenu variable
]//end if items
});//End of view port
这是我的屏幕截图输出:
不显示子组件 panel5。我怎样才能让它可见？
如何显示具有此要求的所有面板？我想根据面板内容自动增加东部区域的大小。
请给我一些建议。
最佳答案
让面板根据其内容自动调整大小
你应该将它的flex设置为0，并确保其他面板的flex不为0。所以在下面的代码中，页脚有 flex: 0 并且中心区域有 flex: 1；因此，页脚将根据其内容调整大小。这是一个 working JsFiddle :
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Footer',
region:'south',
xtype: 'panel',
margins: '5 0 0 5',
flex: 0, // Notice this.
id: 'footer',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items:[{
title: '1',
height: 50
},{
title: '2',
height: 50
}]
},{
title: 'Center Region',
flex: 1, // Notice this.
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
Ext.getCmp('footer').add({
title: '3',
height: 50
});
让固定大小的面板根据其内容滚动
只需在容器(区域面板)上添加 autoScroll: true。
这是一些工作代码，您可以在 this JsFiddle 上看到它们的运行情况:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'West Region',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
id: 'west-region-container',
// Notice the next line
autoScroll: true,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items:[{
title: '1',
height: 100
},{
title: '2',
height: 100
},{
title: '3',
height: 100
}]
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
关于extjs - 如何在其中自动高度视口(viewport)子面板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15587606/