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