JBoss Seam (POJO without EJB) 后台 + ExtJS 前台完整例子（六）

 1.引言

复合用户界面（Composite UI）的概念经过微软的Composite UI Application Block的强化，已经成为智能客户端(Smart Client)使用的典型界面形式。使用ExtJS提供的布局器件，可以方便地实现复合用户界面。

 在这篇文章撰写过程中，Ext社区的活力再次迸发，我要在这里向大家推荐两个站点：
（1）ext tutorial。国人写的非常棒的Ext教程。 在其“第 6 章 奔腾吧！让不同的浏览器里显示一样的布局”中，把Ext 1.1的布局方法讲得很清楚，相信作者会很快补上Ext2.0  中的相应做法。
（2）Ext Gui Builder。可视化的GUI构建器，通过拖动就可以创建一个布局和其他器件，非常好用。

 本文首先通过实例展示布局的创建方法，然后介绍项目中对布局器件的应用。

 2.布局的类型

 根据所用的容器，可以将布局分为下列几种类型：
 （1）基于整个页面，容器为浏览器本身。
 （2）基于某个容器器件。
 （3）基于某个页面DIV标记。

 应用程序的主页通常采用基于整个页面的布局，这一类布局必须使用 Ext.Viewport。
 
 当容器为弹出窗口(Window)或Tab面板(TabPanel)时，使用Ext.Panel实现布局。

 基于某个页面DIV标记的布局，也要使用Ext.Panel。

 3.布局实例

 在 http://code.google.com/p/seamextsample/downloads/list 中罗列了几种常用的布局例子。下载相应的html文件后，拷贝到 Ext 2.0 发行包的 examples\layout 目录，在浏览器中打开就能看到布局的效果。

 提供的布局例子如下：
 （1）左面板+右面板。右面板中可以放置多个Tab面板。
 （2）左面板+右面板，左面板分为上下两个部分。
 （3）左面板+右面板，右面板分为上下两个部分。

 例子中提供了基于容器和基于整个页面两种实现方式，通过修改 layoutBase 变量的值，就能看到不同的效果。

 4.酒店预订界面布局
 
 酒店预订界面布局基于页面DIV标记，是简单的上下两个面板布局。
 

js 代码

Ext.apply(bookingGrid, {
     title : 'Booking Detail',
     region : 'south',
     border : false,
     split : true,
     height : 150,
     collapsible : true
 });

 var layout = new Ext.Panel( {
     title : 'Hotel List',
     layout : 'border',
     width : 547,
     border : false,
     height : 380,
     items : [bookingGrid, hotelGrid]
 });
 layout.render('sidebar');

 在 Ext 2.0 中，网格(Grid)器件本身就是面板，所以直接可以用于布局。
 
 在 hotel-list.js 中，已经将 hotelGrid 的region属性设置为值'center', 所以不需要在上面的代码中再设置了。
 而 bookingGrid 在 booking-list.js 中被设置的region属性值也是'center'，必须修改为'south'。

 5.结语

 Ext 2.0 提供了改进的布局机制，使布局编程更加灵活和方便。你需要花时间对布局的概念有清晰的了解，然后通过不断的实践和尝试，才能最终掌握它。建议使用Ext Gui Builder 构建自己想要的布局，然后再查看生成的源代码，这是一条学习和掌握布局编程的捷径。

附：下面是本系列所有文章的完整列表：
（1）下载示例项目并安装运行
（2）建立Eclipse开发环境
（3）熟悉项目中与JSF相关内容
（4）重新认识JS
（5）ExtJS之表单(Form)
（6）ExtJS之布局(Layout)
（7）ExtJS之网格(Grid)
（8）Java后台和前台的通讯机制
（9）Seam框架简化Java开发
（10）分层架构设计
（11）安全性
（12）单元测试