【发布时间】：2015-05-20 14:04:12
【问题描述】：
问题描述
我得到了一些 ExtJs5.1 代码，其中有几个嵌套组件，例如 Ext.form.field.TextArea、Ext.tab.Panel 和 Ext.Button。
您可以复制&粘贴以下代码，将我的问题重现到 index.html 文件中并进行试验（假设您有一个本地网络服务器正在运行并复制了 ExtJs5 .1 文件到网络服务器的 htdocs 文件夹中，例如 Xampp）：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady( function(){
var textfield =
Ext.create('Ext.form.field.TextArea', {
title: 'textfield',
autoscroll: true});
var textfield_2 =
Ext.create('Ext.form.field.TextArea', {
title: 'textfield_2',
autoscroll: true});
var tab_panel =
Ext.create('Ext.tab.Panel', {
title: 'tab_panel',
columnWidth: 0.5,
padding: '10 10 10 10',
items:[textfield, textfield_2]
});
var right_panel =
Ext.create('Ext.panel.Panel', {
title: 'right_panel',
columnWidth: 0.5,
html: 'blablabalablablaba3',
padding: '10 10 10 10'
});
var lower_vbox_panel = Ext.create('Ext.panel.Panel', {
title: 'lower_vbox_panel',
frame: true,
autoscroll: true,
layout: {type: 'column'},
margin: '10 10 10 10',
items: [tab_panel,right_panel]
});
var button_1 = Ext.create('Ext.Button', {
text: 'button_1',
padding: '15 15 15 15',
margin: '10 10 10 10',
handler: function() {
console.log('button_1 click!');
}
});
var button_2 = Ext.create('Ext.Button', {
text: 'button_2',
padding: '15 15 15 15',
margin: '10 10 10 10',
handler: function() {
console.log('button_2 click!');
}
});
var upper_vbox_panel = Ext.create('Ext.panel.Panel', {
title: 'upper_vbox_panel',
margin: '10 10 10 10',
frame: true,
items: [button_1, button_2]
});
var vbox_panel = Ext.create('Ext.panel.Panel', {
frame: true,
title: 'vbox_panel',
renderTo: Ext.getBody(),
autoscroll: true,
margin: '15 15 15 15',
layout: {type: 'vbox', align: 'stretch'},
items: [upper_vbox_panel,lower_vbox_panel]
});
textfield.setValue("blablablablabla");
textfield_2.setValue("blablablablabla2");
});
</script>
</head>
<body></body>
调整浏览器窗口大小后，名为 vbox_panel 的外部面板会自动调整大小以适应浏览器窗口的宽度和高度。
很遗憾，名为 upper_vbox_panel 和 lower_vbox_panel 的两个嵌套面板及其嵌套组件不会相对于名为 vbox_panel 的外部面板调整大小.
问题：
如何相对于名为 vbox_panel 的外部面板调整两个嵌套面板的大小？
编辑：
我发现类 Ext.container.Viewport 用于将容器适应浏览器窗口，因此必须将名为 vbox_panel 的外部面板添加到其中：
var vp = new Ext.Viewport({
layout : 'fit',
items : [vbox_panel] ,
renderTo : Ext.getBody()
});
现在每个嵌套组件的宽度在调整浏览器窗口大小后都会发生变化，但它们的高度没有变化。
我已经在互联网上搜索了一半的解决方案，包括：layout: 'anchor', align:'stretch' 等。pp.. 但它们都不起作用。
编辑后的新问题：
如何将浏览器窗口高度的变化合并到嵌套组件中？
【问题讨论】：
标签： javascript extjs layout resize