Welcome

首页 / 脚本样式 / ExtJS / GWT-Ext体验之旅,第3部分: 体验布局和树

GWT-Ext体验之旅,第3部分: 体验布局和树2011-10-29 IBM 陈宁 尹雯 王颖初GWT-Ext 是基于 Google Web Toolkit(GWT)和 ExtJs 的功能强大的网页开发控件库。它非常适用于 进行纯 Java 语言的富 Internet 应用的快速开发。本系列文章将详细讲解 GWT-Ext 的基本结构和功能 特点,并通过代码示例来演示该技术的具体实现。

布局 Layout

(1) 水平布局

水平布局使在父容器面板中的所有子对象沿同一水平线依次顺序排列。

水平布局需要实现 com.gwtext.client.widgets.layout.HorizontalLayout 类。

当设定水平布局后,Panel 中新建的子对象将按照加入父容器的次序依次从左向右显示在父面板中。 以下代码清单 1 将产生如图 1 的对象布局。

清单 1. 水平布局

 Panel.setLayout(new HorizontalLayout(15));   panel.add(new Panel("Item 1", 100, 150));   panel.add(new Panel("Item 2", 75, 150));   panel.add(new Panel("Item 3", 100, 150));   panel.add(new Panel("Item 4", 150, 150));
图 1. 水平布局

(2) 垂直布局

垂直布局使在父容器面板中的所有子对象沿垂直方向依次顺序排列。

垂直布局需要实现 com.gwtext.client.widgets.layout.VerticalLayout 类。