How to create a split region with autoheights in ExtJS

Question

I would have thought this would be quite simple... alas it seems nothing about ExtJS is simple.

I need to split the 'center' region of a border layout and have both the top and bottom pannels fill the center region when the page resizes.

As it stands, I can only figure out how to set absolute sizes for the panels.

Here's the code generated using ExtJS Gui Builder

    /* This file is created or modified with 
 * Ext.ux.guid.plugin.GuiDesigner (v2.1.0) 
 */
{
  layout : "border",
  items : [    {
      region : "center",
      title : "map",
      items : [        {
          xtype : "panel",
          title : "Panel",
          autoHeight : true,
          split : true,
          height : 100
      },        {
          xtype : "panel",
          title : "Panel",
          autoHeight : true,
          split : true,
          height : 300
      }]
  },    {
      region : "north",
      split : true,
      height : 100
  },    {
      region : "west",
      width : 300,
      split : true,
      collapsible : true,
      title : "Gazetter Explorer"
  }]
}

Answer 1

First off, autoheight means that the container will collapse to the size of the content and its dimensions will be managed by the browser (not by Ext). This is almost never what you want in an app UI.

Your center region should have some type of layout specified. You could "split" it by giving it layout: 'border' and giving it a center and a north/south panel. However, to mimic an "auto height" type of layout, you'd probably want to go with a vbox layout (Ext 3.x) with two child panels that each stretch to take up 50% (or whatever you want) of the space.