如何在其中自动高度视口子面板？
Posted
技术标签:
【中文标题】如何在其中自动高度视口子面板？【英文标题】：How to auto height viewport child panels in it? 【发布时间】：2013-03-23 13:58:43 【问题描述】：我在 ExtJS4 中工作。我被困在我想自动调整边界布局东部区域的高度。实际上我的要求是根据其中的子元素内容自动增加任何区域的高度。我尝试了很多，但我没有得到解决方案。请给我一些建议。
在我的代码中，我只是在东部地区测试一个包含 5 个面板的简单代码，其中显示了这四个面板。第五个面板不显示，如何使其可见？我只是使用示例代码作为参考。
这是我的视口代码：
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。我怎样才能让它可见？ 如何显示具有此要求的所有面板？我想根据面板内容自动增加东部区域的大小。 请给我一些建议。
【问题讨论】：
阅读 vbox 布局 我阅读并实施了但仍然没有解决问题。 【参考方案1】：让面板根据其内容自动调整大小
您应该将其flex 设置为0，并确保其他面板具有不为0 的flex。因此在以下代码中，页脚具有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()
);
【讨论】：
感谢伊扎基。它有效。但我的要求是我不想在东部区域滚动条。我想让我的页脚灵活，如果我的子组件的长度增加，页脚也应该向下自动扩展，反之亦然反之亦然..请给我解决方案 是的！ Izhaki它对我有用。但它的大小在宽度和高度之间变化，即1000 * 1000。它不会增加超过它。但我想向下增加它的高度并在视图中显示所有内容。实际上我想无限在中心区域滚动，页脚根据中心区域子组件向下移动。我想要像这个链接这样的输出 --> ext4all.com/post/tag/extjs-4-1-0 .... 请给点建议.. @Izhaki：试过这个但没用。请你帮我***.com/questions/26137062/…【参考方案2】：您正在搜索flex 配置设置：
items:[
title: 'panel1',
flex: .3
,
title: 'panel2',
flex: .3
,
title: 'panel3',
flex: .4
]
【讨论】：
感谢peter。但是我已经使用了flex，但它不能满足我的要求。我想根据子组件使页脚灵活（向上或向下）。 我回答您的“如何使子组件 panel5 显示？”也许，我们终于达到了最终目标了吗？抱歉，但您的问题对此一无所知。你能把你的问题说清楚吗？【参考方案3】：这有效（至少对于您的第一个问题）：
Ext.define('MyApp.view.ui.MyViewport',
extend: 'Ext.container.Viewport',
layout:
type: 'border'
,
initComponent: function()
var me = this;
Ext.applyIf(me,
items: [
xtype: 'container',
region: 'center'
,
xtype: 'panel',
width: 150,
title: 'My Panel',
region: 'west'
,
xtype: 'container',
width: 150,
layout:
align: 'stretch',
type: 'vbox'
,
region: 'east',
items: [
xtype: 'panel',
title: 'My Panel',
flex: 1
,
xtype: 'panel',
title: 'My Panel',
flex: 1
,
xtype: 'panel',
title: 'My Panel',
flex: 1
,
xtype: 'panel',
title: 'My Panel',
flex: 1
,
xtype: 'panel',
title: 'My Panel',
flex: 1
]
,
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'north'
,
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'south'
]
);
me.callParent(arguments);
);
【讨论】：
以上是关于如何在其中自动高度视口子面板？的主要内容，如果未能解决你的问题，请参考以下文章
当网格达到一定高度时，如何将垂直滚动条添加到 ext 网格面板？
Bootstrap 3.0 - 垂直对齐同一行中的 3 个面板（自动高度）