第二章: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。