如何在ExtJS中創建具有自動調整功能的分割區域

Question

我原以爲這會很簡單......唉，ExtJS看起來並不簡單。

我需要拆分邊界佈局的「中心」區域，並在頁面調整大小時使頂部和底部的面板填充中心區域。

現在，我只能弄清楚如何爲面板設置絕對尺寸。

下面是使用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

首先生成的代碼，autoheight意味着容器會崩潰到內容的尺寸和它的尺寸將被瀏覽器（未由EXT）來管理。這幾乎從來都不是你想要的應用UI。

您的中心區域應該指定某種類型的佈局。你可以通過給它分配layout: 'border'並給它一箇中心和一個南/北面板來「拆分」它。然而，爲了模仿「自動高度」類型的佈局，您可能希望採用帶有兩個子面板的佈局（Ext 3.x），每個面板可以佔用50％（或任何您想要的）空間。