E3首席讲师熊春系列文章之E3.Tree与EXT.Layout完美整合篇

同学们，熊师讲坛又开讲了。。。 音乐。。。 掌声。。。鲜花。。。美女。。。

课程题目:
『E3.Tree与EXT.Layout完美整合篇』
讲师:
E3首席讲师.XiongChun
必备知识:
(1)、已经学习并掌握了我的上一篇教程-【E3.Tree入门与进阶篇】
(2)、对EXT有一定了解和认识

1.广告时间
1.1.E3简介
由国人黄老大以“分享经验-传递价值-成就你我”为理念，发起并创办的一个致力于JavaEE公共应用组件的开源组织。目前已经成功推出E3.Tree、E3.Resource、E3.Table、E3.IDGenerator四个开源组件。
官方网站:http://www.javae3.com  QQGroup:
1.2.EXT简介
我们的英雄Jack站在无数巨人的肩膀上成就出的一个伟大的Web UI富客户端表现层框架。我想就不必再多说了，你要是连她都不认识，那我也无语了。
官方网站:http://extjs.com
1.3.作者简介
目前头衔:E3首席讲师，致力于E3各开源组件的的宣传与推广工作，负责E3用户的培训与支持.
我的心愿：如果你觉得教程对你有帮助的话，可否去帮我浇浇花水，偶养滴花快开始长果果了，谢谢了:)
http://user.qzone.qq.com/307916217
2.进入主题
2.1.为什么要将E3.Tree和EXT.Layout布局整合?
目前绝大多数的JavaEE企业应用的布局都是采用FrameSet的结构来实现，在缺乏专业美工的和精湛的CSS和JS功底的情况下很难做出酷炫的布局界面。大多呆板，丑陋不堪入目。而EXT.Layout提供了非常漂亮和酷炫的布局方案，通过Div将页面分为north,west,east,south,center五个区域,我们可以根据自己的需要来灵活的组装，而且每一个区域都提供了很多贴心的小工具比如平滑的收缩，展开等等。而我们的E3.Tree的话则是屏蔽了各种JS树模型的差异(目前支持XTree和EXT.Tree)提供统一的Java编程接口的一个方便易用的开源组件。可用于展示具有树结构的数据模型，比如我们常用的导航菜单以及权限管理的组织机构模型等等。所以将Ext.Layut和E3.Tree整合便可以方便快捷的实现我们JavaEE Web应用系统的一个酷炫的布局结构。
2.2.效果截图
我们先来看一下整合后的效果图，如果您感兴趣的话就继续往下看，如果你已经掌握了相关的布局方案的话那就赶紧离开，不必再浪费时间了。
图一:正常加载后的效果图

图二:边栏被收缩后的效果图

图三：边栏根据鼠标事件临时展开的效果图


3.实现步骤
3.1.分别下载Ext2.0和E3.Tree的相关资源，并引入到工程中来.关于EXT资源的引入请参阅其他文章，Google一下就有，限于篇幅就不再赘述了；关于E3.Tree资源的引入请参阅我的上一篇教程E3.Tree入门与进阶篇.
3.2.新建一个JSP文件.
3.2.1.导入Ext资源Java代码
<%@ page contentType="text/html; charset=GBK"%>  
<%-- 加载所需CSS文件 --%>  
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/uilib/ext2.0/resources/css/ext-all.css"/>  
<%-- 加载所需的JS文件 --%>  
<script type="text/javascript" src="${pageContext.request.contextPath}/uilib/ext2.0/adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath}/uilib/ext2.0/ext-all.js"></script> 

<%@ page contentType="text/html; charset=GBK"%>
<%-- 加载所需CSS文件 --%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/uilib/ext2.0/resources/css/ext-all.css"/>
<%-- 加载所需的JS文件 --%>
<script type="text/javascript" src="${pageContext.request.contextPath}/uilib/ext2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/uilib/ext2.0/ext-all.js"></script>
3.2.2.使用Ext语法构建Ext.Layout布局Java代码
<script type="text/javascript">  
Ext.onReady(function(){  
Ext.BLANK_IMAGE_URL = '${pageContext.request.contextPath}/uilib/ext2.0/resources/images/default/s.gif';  
      new Ext.Viewport({  
             layout:'border',  
             items:[  
                    new Ext.BoxComponent({  
                         region:'north',  
                         el: 'north',//填充指定id的区域内容到north区域，若不设该属性，请通过html:'内容'，设置区域内容  
                         height:0 
                   }),new Ext.BoxComponent({  
                         region:'south',  
                         el: 'south',  
                         height:20 
                   }),{  
                        region:'center',  
                        title:'**县人民政府网站管理后台',  
                        autoScroll:true,  
                        contentEl:'center' 
                   },{  
                       region:'west',  
                       width: 200,  
                       collapsible: true,  
                       minSize: 100,  
                       maxSize: 300,  
                       split: true,  
                       title: 'eRed门户网站通用平台 V 0.1',  
                       layout:'accordion',  
                       layoutConfig:{  
                        animate:true 
                       },  
                    items: [{  
                    title:'系统管理菜单',  
                    autoScroll:true,  
                    border:false,  
                    contentEl: 'tree',  
                    iconCls:'settings' 
                },{  
                    title:'业务功能菜单',  
                    html: '<font size=2px>显示和业务相关的菜单</font>',  
                    border:false,  
                    autoScroll:true,  
                    iconCls:'nav' 
                   },{  
                    title:'安全选项',  
                    html: '<font size=2px>显示和安全选项相关的菜单</font>',  
                    border:false,  
                    autoScroll:true,  
                    iconCls:'security' 
                   },{  
                    title:'关于eRedLab',  
                    html: '<font size=2px>显示eRedLab的相关信息</font>',  
                    border:false,  
                    autoScroll:true,  
                    iconCls:'about' 
                   }]  
                   }]  
            });  
       }); 

<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '${pageContext.request.contextPath}/uilib/ext2.0/resources/images/default/s.gif';
      new Ext.Viewport({
             layout:'border',
             items:[
                    new Ext.BoxComponent({
                         region:'north',
                         el: 'north',//填充指定id的区域内容到north区域，若不设该属性，请通过html:'内容'，设置区域内容
                         height:0
                   }),new Ext.BoxComponent({
                         region:'south',
                         el: 'south',
                         height:20
                   }),{
                        region:'center',
                        title:'**县人民政府网站管理后台',
                        autoScroll:true,
                        contentEl:'center'
                   },{
                       region:'west',
                       width: 200,
                       collapsible: true,
                       minSize: 100,
                       maxSize: 300,
                       split: true,
                       title: 'eRed门户网站通用平台 V 0.1',
                       layout:'accordion',
                       layoutConfig:{
                        animate:true
                       },
                    items: [{
                    title:'系统管理菜单',
                    autoScroll:true,
                    border:false,
                    contentEl: 'tree',
                    iconCls:'settings'
                },{
                    title:'业务功能菜单',
                    html: '<font size=2px>显示和业务相关的菜单</font>',
                    border:false,
                    autoScroll:true,
                    iconCls:'nav'
                   },{
                    title:'安全选项',
                    html: '<font size=2px>显示和安全选项相关的菜单</font>',
                    border:false,
                    autoScroll:true,
                    iconCls:'security'
                   },{
                    title:'关于eRedLab',
                    html: '<font size=2px>显示eRedLab的相关信息</font>',
                    border:false,
                    autoScroll:true,
                    iconCls:'about'
                   }]
                   }]
            });
       });
3.2.3.大家可能注意到了上面Ext语法中的el和contentEl属性，他们都对应Div的ID属性值，表示把这个DIV与相应的EXT布局关联起来.比如 contentEl: 'tree',即表示ID为"tree"这个DIV与Ext.Layout布局的west区域关联.下面我们看上面EXT语法程序中所关联的几个DIV
<div id="north">
</div>
<div id="south" class="copyRight">
Copyright© 2008 eRedLab® 东方红软件实验室 中国.昆明 理念:分享经验-传递价值-成就你我
</div>
(1)、可能大家注意到了，并没有创建ID为"tree"的Div，这是因为下面E3.Tree在构建树的时候已经创建了以个ID为"tree"的Div,我们只需要直接使用以下语句即可:
${treeScript}
(2)、还有一个DIV需要着重介绍一下，就是用来显示业务办理区域的DIV，如下所示:
<div id="center">
<iframe name="mainFrame" class="mainFrame" frameborder="0"></iframe>
</div>
大家看到了，我内嵌了一个iframe,这个就可以用来显示点击E3.Tree菜单后的业务办理区域.当然，得配合E3.Tree的树节点单击事件来指定，如下所示:
function doAction(url){
  parent.mainFrame.location.href = url;
}
如果你看到这有点糊涂的话，还是那句老话，先去看我的第一篇教程.E3.Tree入门与进阶.
3.2.4.附上我的完整的JSP文件供参考.
下课。。。。。
课程表:
课程名:『E3.Table初级应用』
发表时间:2008-06-01
发表地点: JavaEye, E3官方论坛, 作者技术Blog 同步发表

评论

1 楼 JaNer 2009-06-30  

你好，在你转载的文章中。有两篇是我写的：

E3首席讲师XC系列文章之E3.Tree入门与进阶篇
http://incan.iteye.com/blog/278016

和

E3首席讲师XC系列文章之E3.Tree与EXT.Layout完美整合篇
http://incan.iteye.com/blog/278017

想请您吧标题中我的姓名去掉！给您添麻烦了。谢谢~