Javascript ExtJS - 填充和自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4035485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS - Fill and Auto Height
提问by Onkelborg
I'm using ExtJS (html/css) and I've got a question regarding Layout. Example:
我正在使用 ExtJS (html/css)，我有一个关于布局的问题。例子：
|--------|
| |
| |
| |
| |
| |
|--------|
| |
| |
|--------|
The combined height (they don't have any padding, margin etc.) is 100% of it's parent container. Preferably, it's two panelssomehow stacked on each other.
组合高度（它们没有任何填充、边距等）是其父容器的 100%。最好是两个面板以某种方式相互堆叠。
The problem is that I don't know the heightof neither the top panel nor the bottom panel (it's not fixed, and may change since the content within the panels may change, it's two menus.) I need the top panelto fillout the remaining space, or have a scrollbar if needed.
问题是，我不知道高度既不是顶部面板也没有底板的（它不是固定的，可能会改变，因为面板中的内容可能会改变，这两个菜单）。我需要的顶部面板，以填补了剩余空间，或者在需要时使用滚动条。
It's not that important that the solution is pure ExtJS, it's just that the container for the two panels is an ExtJS panel, the content of the two panels inside is plain html driven by javascript.
解决方案是纯ExtJS并不重要，只是两个面板的容器是一个ExtJS面板，两个面板里面的内容是javascript驱动的纯html。
Anybody who has a clue where to start?
有人知道从哪里开始吗？
Edit
I think a part of the problem is the lack of the "resize" event. I think I can get away with some semi-dynamic/static solution and try to calculate the height of the lower panel
编辑
我认为问题的一部分是缺少“调整大小”事件。我想我可以摆脱一些半动态/静态解决方案并尝试计算下面板的高度
采纳答案by divestoclimb
This is not an easy problem to solve. By your description of the problem Panel 2 must have autoHeight: true, but there is no way to tell the browser or Ext to automatically size the top panel according to that.
这不是一个容易解决的问题。根据您对 Panel 2 must have 问题的描述autoHeight: true，但无法告诉浏览器或 Ext 根据该问题自动调整顶部面板的大小。
The best I can come up with is to do it manually on a timer:
我能想到的最好的办法是在计时器上手动完成：
- Create an outer container for both panels with an absolute layout, fixed height. Apply a custom "position: relative" style to it.
- Panel 1 has
config x: 0, y: 0, anchor: "100% 100%", autoScroll: true - Panel 2 is
autoHeight: truewith customstyle: "top: auto; bottom: 0" - Run a task on an interval of 1 sec or so that checks the height of Panel 2, and assigns that height to a padding-bottom style on Panel 1
- 为具有绝对布局和固定高度的两个面板创建一个外部容器。对其应用自定义“位置：相对”样式。
- 面板 1 有
config x: 0, y: 0, anchor: "100% 100%", autoScroll: true - 面板 2 是
autoHeight: true定制的style: "top: auto; bottom: 0" - 以 1 秒左右的间隔运行一项任务，检查面板 2 的高度，并将该高度分配给面板 1 上的填充底部样式
回答by Andy
There may be a easier way. In ExtJS 4 (I haven't tested in 3 but it might work) when using the vboxlayout if a child item has a flexof 0or undefinedthe layout manager will not adjust the height of that item.
可能有更简单的方法。在 ExtJS 4 中（我没有在 3 中测试过，但它可能工作）当使用vbox布局时，如果子项有一个flexof0或者undefined布局管理器不会调整该项的高度。
So for your example, the top panel would have a flexof 1and the bottom panel would have a flexof 0:
因此，对于您的示例，顶部面板将有一个flexof 1，底部面板将有一个flexof 0：
Ext.create("widget.panel", {
renderTo: Ext.getBody(),
height: 300, width: 400,
layout: { type: 'vbox', pack: 'start', align: 'stretch' },
items: [{
// our top panel
xtype: 'container',
flex: 1, // take remaining available vert space
layout: 'fit',
autoScroll: true,
items: [{
xtype: 'component',
// some long html to demonstrate scrolling
html: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
}]
},{
// our bottom panel
xtype: 'container',
flex: 0, // dont change height of component (i.e. let children dictate size.)
items: [{
xtype: 'button',
height: 200,
text: 'Hello World'
}]
}]
});
Now the bottom panel will just take the height of any child components and the top panel will take the remaining available height.
现在底部面板将仅采用任何子组件的高度，顶部面板将采用剩余的可用高度。
回答by user2648222
You could also use a CSS trick ('max-height' CSS field) instead of 'layout' and 'flex' ExtJS fields. For that just add the following lines to element which should be scrollable:
您还可以使用 CSS 技巧（'max-height' CSS 字段）代替 'layout' 和 'flex' ExtJS 字段。为此，只需将以下几行添加到应该可滚动的元素中：
bodyStyle: { maxHeight: '300px' },
autoScroll: true,
Tested with ExtJS 3.4.0.
使用 ExtJS 3.4.0 测试。
回答by SW4
If I get the question correct- the two panels should not have a fixed size UNLESS they have content, in which case they scroll? Typically I would suggest that at least one of the panels represents 'master' content and has a fixed size. Otherwise, this should work:
如果我的问题是正确的 - 两个面板不应该有固定大小，除非它们有内容，在这种情况下它们会滚动？通常我会建议至少有一个面板代表“主”内容并具有固定大小。否则，这应该有效：
layout:'vbox',
layoutConfig: {
align : 'stretch',
pack : 'start',
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', flex:2}
]
Simply give that config to the 'holding' element and then setup 'panel 1' and 'panel 2' as you see fit (i.e. replace '{html:'panel 1', flex:1}' with the name of the component)
只需将该配置提供给 'holding' 元素，然后按照您认为合适的方式设置 'panel 1' 和 'panel 2'（即，将 '{html:'panel 1', flex:1}' 替换为组件名称）
