GXT之旅:第二章:GXT组件(2)——渲染和容器
2012-01-03 13:47
295 查看
异步渲染
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的一个子类。这是个非常有用的,利于用户交互的控件。稍后我们会使用到它。他由页眉,页脚和内容区三部分组成,在顶端和底端都可以显式工具栏。它就有内建的折叠按钮和用来自定义功能的按钮。相关文章推荐
- GXT之旅:第二章:GXT组件(4)——容器的布局
- GXT之旅:第二章:GXT组件(5)——加载消息
- GXT之旅:第二章:GXT组件(8)——Popup
- GXT之旅:第二章:GXT组件(9)——Popup位置
- GXT之旅:第二章:GXT组件(6)——定制组件
- GXT之旅:第二章:GXT组件(1)——组件层次结构
- GXT之旅:第二章:GXT组件(3)——事件和监听
- GXT之旅:第二章:GXT组件(7)——Button和Tooltip
- React如何将组件渲染到指定DOM节点详解
- Fusioncharts与Ext组件集成后重新渲染的解决方法记录
- 在Bean中获取Spring容器中的各种组件
- 【SSH进阶之路】一步步重构容器实现Spring框架——解决容器对组件的“侵入式”管理的两种方案--主动查找和控制反转(九)
- canvas组件的三种渲染模式
- 【第二章】 IoC 之 2.2 IoC 容器基本原理 ——跟我学Spring3
- 「UnityShader入门精要」第二章 渲染流水线
- 【第二章】 IoC 之 2.2 IoC 容器基本原理 ——跟我学Spring3
- Ioc容器Autofac系列(3)-- 三种注册组件的方式
- Mini 容器学习笔记3——组件的注册(基础篇)
- Spring容器对Bean组件的管理
- DotNET应用架构设计指南(第二章:设计应用程序和服务组件(2-5和3-6))已上传