如何使用extjs写一个拥有表单和列表的页面列表高度撑满剩余页面列表内容可滚动

以下是一个简单的使用ExtJS框架编写表单和列表页面的示例：

Ext.onReady(function() {
  // 创建表单
  var form = Ext.create('Ext.form.Panel', {
    title: '表单',
    width: 400,
    height: 200,
    items: [{
      xtype: 'textfield',
      fieldLabel: '姓名',
      name: 'name'
    }, {
      xtype: 'textfield',
      fieldLabel: '年龄',
      name: 'age'
    }]
  });

  // 创建列表
  var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'age'],
    data: [{
      name: '张三',
      age: 20
    }, {
      name: '李四',
      age: 25
    }, {
      name: '王五',
      age: 30
    }]
  });

  var grid = Ext.create('Ext.grid.Panel', {
    title: '列表',
    store: store,
    columns: [{
      text: '姓名',
      dataIndex: 'name'
    }, {
      text: '年龄',
      dataIndex: 'age'
    }],
    forceFit: true
  });

  // 创建主面板
  var panel = Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    layout: 'fit',
    items: [form, grid]
  });

  // 设置列表高度
  panel.on('resize', function() {
    grid.setHeight(panel.getHeight() - form.getHeight());
  });
});

在这个示例中，我们首先创建了一个表单和一个列表，然后将它们放在一个主面板中。使用布局管理器'fit'，使表单和列表都能够撑满面板。我们还通过监听主面板的'resize'事件来动态调整列表的高度，以便让它填满剩余的空间。最后，我们将主面板渲染到ExtJS的'Body'元素中。

为了让列表内容可滚动，我们可以将列表的高度设置为一个固定值，并在列表周围包装一个滚动条容器。

var grid = Ext.create('Ext.grid.Panel', {
  title: '列表',
  store: store,
  columns: [{
    text: '姓名',
    dataIndex: 'name'
  }, {
    text: '年龄',
    dataIndex: 'age'
  }],
  height: 300, // 固定高度
  forceFit: true,
  // 包装滚动条容器
  viewConfig: {
    style: {
      overflow: 'auto',
      overflowX: 'hidden'
    }
  }
});

通过这种方式，我们可以实现一个拥有表单和列表的页面，列表的高度可以撑满剩余的页面，列表内容可以滚动。