GXT之旅：第二章：GXT组件(1)——组件层次结构

第二章：GXT组件

现在我们已经有了开发环境，在本章中，我要详细介绍ExtGWT组件用法，并且通过开发一个demo程序来展示一系列的GXT组件。一开始会介绍一些关键的概念，然后就会着眼于demo项目的实战开发。

本章，我们会涉及到如下GXt功能集：

• Component
• Container
• BoxComponent
• ScrollContainer
• LayoutContainer
• FlowLayout
• ContentPanel
• Viewport
• BorderLayout
• Loading messages
• Custom Components
• Buttons
• Tooltip
• Popup
• SelectionListener
• TextField
• KeyListener

下图，是我们本章所涉及的控件集的层次结构。

ExtGwt Demo 库

在Sencha官网上，我们可以看到所有的GXT的Demo（http://www.sencha.com/examples/explorer.html）。如果大家还没有预览，请先通览一下，然后再开始我们的demo项目。

GXT基础1：Component

GWT中，Widget（com.google.gwt.user.client.ui.Widget）是所有显式组件的基类，正如我们可以在浏览器中看见的：buttons, textboxes, tree views

GXT中，Component（com.extjs.gxt.ui.client.widget.Component）则是所有显式组件的基类。因为GXT是建立在GWT之上的，所以我们也不会奇怪，所有GXT的componests是建立在GWT的Widget之上的。具体说来，GXT components的父类是GXT的Widget，并扩展了一些新的功能而已。

所有的GXT的components都引入了生命周期的概念，他们是：创建，附加，自动分离，异步渲染。Components 继承了基本的hide and show, enable and disable 功能。

BoxComponent

所有的GXt显式组件，都继承了Component，同时也直接或间接的使用了BoxComponent。