GXT之旅：第二章：GXT组件(2)——渲染和容器

异步渲染

GWT的工作原理，就是操作DOM元素——Document Object Model来渲染浏览器中的html页面。GWT widget 其实就是由html标记集合组成的，可以在DOM中添加和删除。

例如，一个GWT的button widget的html标记会被表述成，如下：

<button type="button" class="gwt-Button" style="position: absolute;
left: 80px; top: 45px; ">Click Me!</button>

在GWT中，当一个widget被初始化后，html标记会被同时的渲染在DOM中。当一个widget被添加到另一个GWT panel 的widget上时，也是同时的html标记被渲染。

GXT的components（就相对于GWT的widgets）则被渲染的方式是不同的——异步渲染（懒渲染）。当一个GXT component被初始化后，html标记不会马上被渲染。只有当component的渲染方法被调用之后，html标记才会被渲染。这种方法被看作是更有效的去节省html所占用的内存空间。

虽然GXT的component是异步渲染的，但是components的相关属性是可以在渲染之前就被设置的。例如，一个TextField在被html渲染之前，我们就可以给它设置一个value属性。

如果另外一种情况，就是GXT的componment被添加到另外一个GWT的panel上时，component的渲染方法则会马上被调用，也就是说会被同时的渲染该component。如果换成是一个GXT的panel里，添加了也是GXt的component 的时候，那么他还是被异步渲染的。

GXT基础2：Container

Container是Boxcomponent的一个子类，它可以包含其他的components。类路径是：com.extjs.gxt.ui.client.widget.Container<T>。他们只是负责附加，分离和管理他们的子components，就Container自身而言，他不负责去处理components的布局摆放和渲染。下面是从左到右的类继承关系。

LayoutContainer

Layoutcontainer继承了ScrollContainer， ScrollContainer的父类就是Container。顾名思义，ScrollContainer可以使其内容在Container里是可折叠的。LayoutContainer则多具备一项功能，可以让子components的布局摆放效果交给一个具体的Layout类来处理。

让我通过如下一个简单例子，来了解异步渲染是如果工作的。

• 首先我们创建一个LayoutContainer

LayoutContainer layoutContainer = new LayoutContainer();

• 此时，还没有任何html的渲染，当前的layoutcontainer也没有被添加到GXT容器和GWT的Panel中。下面我们添加一个Button

LayoutContainer layoutContainer = new LayoutContainer();
Button button = new Button("Click me");

• 同样，我们虽然创建了两个对象layoutContainer和button，仍然还是没有任何的html标记被渲染。下面将button添加到layoutContainer中

LayoutContainer layoutContainer = new LayoutContainer();
Button button = new Button("Click me");
layoutContainer.add(button);

• 同样的，此时此刻仍然没有任何的html被渲染出来，这是因为layoutContainer他本身没有被渲染。如果我们将layoutContainer添加到GWT的Panel中（RootPanel），让我们拭目以待

LayoutContainer layoutContainer = new LayoutContainer();
Button button = new Button("Click me");
layoutContainer.add(button);
RootPanel.get().add(layoutContainer);

• 添加layoutContainer到RootPanel中，会触发layoutContainer的渲染方法被调用。Container中的所有控件会有一种级联效应，被层级的渲染出来。因此，当layoutContainer被渲染之后，他的children们的渲染方法也会被调用，在这里就是刚刚创建的那个button的渲染方法会随之被调用。当我们通过工具查看DOM的时候，我们会找到到layoutContainer和button对应的html标记
• 如果我们像再添加一个button，如下代码：

LayoutContainer layoutContainer = new LayoutContainer();
Button button = new Button("Click me");
layoutContainer.add(button);
RootPanel.get().add(layoutContainer);

Button anotherButton = new Button("Click me too");
layoutContainer.add(anotherButton);

• 如果你认为anotherButton也会显式出来，那么你就想错了！当layoutContainer已经被渲染之后，再在layoutContainer身上添加的anotherButton不会被渲染了。对于这种情况，我们还有别的解决办法，就是调用layoutContainer的layout()方法，那么系统会自动的去调用两个button的渲染方法。
  

LayoutContainer layoutContainer = new LayoutContainer();
Button button = new Button("Click me");
layoutContainer.add(button);
RootPanel.get().add(layoutContainer);
Button anotherButton = new Button("Click me too");
layoutContainer.add(anotherButton);
layoutContainer.layout();

• 此时，anotherButton的html标记已经被添加到DOM中了。
  

FlowLayout

FlowLayout是LayoutContainer的默认布局排列（layout）方式。这种layout方式下，所添加的components，都不能够被设置其摆放位置，大小等功能。只是每个component会伴随着前一个component的渲染，而从左到右，从上到下的排列。之后我们会了解到更多的layout方式。

ContentPanel

ContentPanel是LayoutContainer的一个子类。这是个非常有用的，利于用户交互的控件。稍后我们会使用到它。他由页眉，页脚和内容区三部分组成，在顶端和底端都可以显式工具栏。它就有内建的折叠按钮和用来自定义功能的按钮。