GWT-Ext 是基于 Google Web Toolkit（GWT）和 ExtJs 的功能强大的网页开发控件库。它非常适用于进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能特点，并通过代码示例来演示该技术的具体实现。本文是 GWT-Ext 体验之旅系列 的第 3 部分，我们将体验各种布局管理器的效果，了解我们常用的布局管理器的编程方式和一些经验总结。在对树的介绍中，我们将从树的同步和异步方式的初始化到树的一些特性进行详细介绍。

布局 Layout

(1) 水平布局

水平布局使在父容器面板中的所有子对象沿同一水平线依次顺序排列。

水平布局需要实现 com.gwtext.client.widgets.layout.HorizontalLayout 类。

当设定水平布局后，Panel 中新建的子对象将按照加入父容器的次序依次从左向右显示在父面板中。以下代码清单 1 将产生如图 1 的对象布局。

				
 Panel.setLayout(new HorizontalLayout(15));   
 panel.add(new Panel("Item 1", 100, 150));   
 panel.add(new Panel("Item 2", 75, 150));   
 panel.add(new Panel("Item 3", 100, 150));   
 panel.add(new Panel("Item 4", 150, 150));

(2) 垂直布局

垂直布局使在父容器面板中的所有子对象沿垂直方向依次顺序排列。

垂直布局需要实现 com.gwtext.client.widgets.layout.VerticalLayout 类。

当设定垂直布局后，所有的子对象将按照加入父容器的次序依次从上向下的显示在父面板中。下列代码清单 2 将产生如图 2 所示的垂直布局。

				
 Panel panel = new Panel();   
 panel.setLayout(new VerticalLayout(15));     
 panel.add(new Panel("Item 1", 150, 100));   
 panel.add(new Panel("Item 2", 350, 75));   
 panel.add(new Panel("Item 3", 150, 100));   
 panel.add(new Panel("Item 3", 150, 150));

(3) 边框布局

边框布局是一种高级的页面布局方式，它将整个的 UI 显示空间分为上、下、左、右、和中央五个部分，各个部分可以在各自所属的布局空间中随 UI 界面大小的变化自由缩放。当 UI 空间尺寸变化时，上、下两部分可以在水平方向上自由缩放，垂直高度固定不变，左、右两部分可以在垂直方向上自由缩放，水平宽度固定不变，当上、下、左、右四个部分布局尺寸确定后，中央部分会沿水平和垂直两个方向填充所有剩余空间。以下图 3 为一个边框布局的示例。

垂直布局需要实现 com.gwtext.client.widgets.layout.BorderLayout 类。

使用 com.gwtext.client.widgets.layout.BorderLayoutData 来定义各个子空间的显示属性，如最大尺寸、最小尺寸、空白等属性。 BorderLayoutData 用 setMargins 来定义各个子空间在边框布局中的位置。

 public void setMinSize(int minSize) 
 public void setMaxSize(int maxSize) 
 public void setSplit(boolean split) 
 public void setMargins(int top,int left,int right,int bottom)

使用类 com.gwtext.client.core.RegionPosition 来定义各个边框布局子空间的位置。 RegionPosition.NORTH 表示上部子空间，RegionPosition.SOUTH 表示下部子空间，RegionPosition.WEST 表示左侧子空间，RegionPosition.EAST 表示右侧子空间，RegionPosition.CENTER 则表示中央子空间。需要说明一下的是，上下左右这些相对位置都是针对 RegionPosition.CENTER 这个中央子空间来放置的。因此 GWT-Ext 如果发现使用边框布局，但是没有指定放置在中间的控件，会初始化失败。通过使用以下构造函数可定义各个子对象所属的空间布局。

public BorderLayoutData(RegionPosition region)

代码清单 3 中 borderPanel 为具有边框布局的父面板，southPanel 为一个子对象面板。使用 add 方法将 southPanel 放在 borderPanel 面板的下部子空间中。其中参数 component 表示要添加的对象即 southPanel，layoutData 是 BorderLayoutData 类的实例对象。在这个例子里，我们使用 RegionPosition.SOUTH 构造了 southData，并设置了该空间的最大尺寸、最小尺寸、空白和位置等属性。