Question

问题描述

我有一些ExtJs5.1代码，它有几个嵌套组件，比如 Ext.form.field.TextArea ， Ext.tab.Panel 和 Ext.Button 。

您可以复制并粘贴以下代码，将我的问题重现为 index.html 文件并进行试验（假设您运行并复制了本地网络服务器）将ExtJs5.1文件放入Web服务器的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 的外部面板会自动调整大小以适应浏览器窗口＆＃39;宽度和高度。

不幸的是，名为 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()
});

现在，在调整浏览器窗口大小后，每个嵌套组件的宽度都会发生变化，但它们的高度不是。

我已经搜索了一半的互联网解决方案，包括：布局：＆＃39;锚定＆＃39;，对齐：＆＃39;拉伸＆＃39; pp ..但它们都不起作用。

编辑后的新问题：

如何将浏览器窗口高度的更改合并到嵌套组件中？

Answer 1

使用layout:'fit'将基本容器与其父容器匹配，在此fiddle中，您可以看到布局配置的实际效果。

请阅读documentation以便更好地理解，简短的父布局负责其所有孩子的定位和大小调整。

ExtJs5.1 - 嵌套面板：将内部面板的大小调整为外部面板

问题描述

问题：

编辑：

编辑后的新问题：

1 个答案: