如何使用extjs写一个拥有表单和列表的页面其中表单拥有展开收起功能列表高度撑满剩余页面并随着表单展开收起变化列表内容可滚动

以下是一个简单的示例代码，展现如何使用ExtJS编写具有表单和列表的页面，并实现展开收起功能和自适应高度和滚动功能。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ExtJS Form and Grid Example</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/gpl/6.6.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/6.6.0/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            // 创建表单
            var formPanel = Ext.create('Ext.form.Panel', {
                title: 'Form',
                width: '100%',
                collapsible: true,
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    name: 'name'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    name: 'email'
                }]
            });

            // 创建列表
            var gridPanel = Ext.create('Ext.grid.Panel', {
                title: 'Grid',
                width: '100%',
                store: Ext.create('Ext.data.Store', {
                    fields: ['name', 'email'],
                    data: [
                        { name: 'John', email: 'john@example.com' },
                        { name: 'Jane', email: 'jane@example.com' }
                    ]
                }),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email'
                }]
            });

            // 创建容器
            var container = Ext.create('Ext.container.Container', {
                renderTo: Ext.getBody(),
                layout: 'vbox',
                items: [formPanel, gridPanel]
            });

            // 监听表单收起展开事件，自适应高度
            formPanel.on('collapse', function() {
                container.doLayout();
            });
            formPanel.on('expand', function() {
                container.doLayout();
            });
        });
    </script>
</head>
<body></body>
</html>

在此示例代码中，我们首先使用Ext.create方法创建表单和列表，然后将它们添加到Ext.container.Container容器中，并将容器渲染到页面上。在容器上设置vbox布局，使表单和列表垂直排列。我们还在表单和列表上设置了width: '100%'，以使它们自适应容器的宽度。

为了实现展开收起功能，我们在表单上设置了collapsible: true属性，并在表单的collapse和expand事件中重新布局容器。这将调整表单和列表的高度，使它们始终填充剩余的页面空间。我们还可以使用CSS样式来控制表单和列表的高度。

最后，我们还为列表添加了一个数据存储，并在列模型中定义了两个列，以显示名称和电子邮件。我们可以在存储中添加更多数据，并使用分页工具栏等功能来提供更好的用户体验。

如何使用extjs写一个拥有表单和列表的页面其中表单拥有展开收起功能列表高度撑满剩余页面并随着表单展开收起变化列表内容可滚动