GXT 2.0m1版 Layout and LayoutData 介绍

GXT 2.0m1版Layout and LayoutData 介绍

GXT将Layout的设置分成两部分，一是Layout的类型，二是与之相对应的Layout的属性，也就是LayoutData。让一LayoutContainer应用一种Layout时，先设置是应用哪种类型的，之后在添加Component时，把LayoutData也添加进去。我认为这样的优点是把添加Component同设置Component的Layout分离开，从而可以灵活的为Component应用不同的Layout。

AbsoluteLayout

绝对定位的Layout，以屏幕的上边和左边为基准，定位一个Component；

主要方法：

setPosition(Component c, int left, int top)

AbsoluteData

可以设置的属性有left、top

BorderLayout

这是一个面向应用程序用户界面的Layout，它可以按照方位（南、北、东、西、中）的放置Component，还支持两个相邻区域间的Split Bar的效果。任意一个区域都可以收缩或伸展，也可以显示或隐藏。

  public class BorderLayoutExample extends LayoutContainer {

    public BorderLayoutExample() {
      setLayout(new BorderLayout());

      ContentPanel west = new ContentPanel();
      ContentPanel center = new ContentPanel();

      BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
      westData.setSplit(true);
      westData.setCollapsible(true);
      westData.setMargins(new Margins(5));

      BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
      centerData.setMargins(new Margins(5, 0, 5, 0));

      add(west, westData);
      add(center, centerData);
    }
  }

BorderLayoutData

可以设置的属性有：

1. Margin、
2. MaxSize、
3. MinSize、
4. Region（所在区域）、显示或隐藏、收缩或伸展和SplitBar功能。

CenterLayout

将一个widget放置在Container的中间位置；

FlowLayout

最简单的布局类型，是Container默认的Layout类型。应用此类型的Layout不会影响在其中的Component的尺寸和位置。

FormLayout

该布局类型适合制作类似注册表单的那种布局，它只能呈现继承了Field类型的控件，而其它控件在呈现时会被忽略。Field类型的控件有：ComboBox、TextField、CheckBox等网页常用的控件。

FormLayoutData

可以设置的属性有：

1. Label的布局、
2. Label宽度、
3. Label的Pad、
4. Label的间隔符（默认是“：”）
5. 设置Label的显示或隐藏。

HBoxLayout和VBoxLayout

HBoxLayout是将Component横向放置的布局类型，VBoxLayout是将Component纵向放置的布局类型。

HBoxLayoutData和VBoxLayoutData

可以设置的属性：可以拉伸的最小尺寸（默认是0）和最大尺寸（默认是1000000）、Flex的设置。Flex是一个在改变尺寸时，做尺寸计算用的度量值。

TableLayout

这是一种表格的形式布局类型，可以指定列数，行数会自动根据添加的Component数来计算，之后将添加的Component按照从左到右、从上到下的顺序呈现出来。

TableLayoutData

1. 合并单元格的个数
2. 单元格的高度和宽度
3. 单元格的Margin和Padding
4. 单元格的横向和纵向的布局
5. 单元格的CSS样式