`

近期的ext项目总结(转)

阅读更多

最近也终于使用ext做了一个小的web项目。第一次使用ext做项目毕竟经验不足,仅记下一些开发思路和需要注意的地方。

 

Ext Js 2.2+Spring 2.5,没有使用struts,hibernate

 

1)目录结构

a)js部分

根目录下建立/js/ext/目录,存放所有和ext相关的js文件。/js/ext/目录下可建立ext相关子目录

/js/ext/adapter/ — 存放适配器jquery,prototype,yui。。。

/js/ext/experimental/ — 存放ext一些未正式推出的组件,可参考ext开发包examples例子部分。

/js/ext/plugins/ — 存放ext扩展组件,例如ext的patch文件,ext主题,扩展组建等等。

/js/ext/resources/ — 不用说了,ext开发包中的resources目录直接拷贝。

/js/ — 目录下可以放一些最常用 的js文件。

/js/ext/ — 目录下放置ext-all.js,ext-base.js,ext-lang-zh_CN.js,ext核心文件;

b)模块部分

根目录下建立/module/文件夹,每个模块在/module/目录下新建文件夹,例如:

/module/comment/ — 评论模块

/module/stat/ — 统计模块

每个模块目录下新建js目录存放当前模块需要引用的js文件,例如/module/comment/js/comment.js

为简化开发不使用struts,直接使用jsp代替struts;每个模块下新建action.jsp替代structs接受

ext ajax请求,action.jsp不负责页面的显示。只负责service层方法调用及请求跳转。

c)权限部分

根目录下直接建一个security目录完事。

2)基本布局及权限

border布局,center区域使用TabPanel组建增加新的iframe窗口装载系统不同模块。

暂不在意iframe的效率问题,尽可能做到每个系统模块+UI部分的独立。

初始化布局时TabPanel组件中添加默认的欢迎登录页面,解决TabPanel组件添加新窗口时高度增加的bug。

权限系统设计参考spring security建议的数据库设计,项目后期可与spring security整合。

3)用户访问超时

解决两种情况下的用户访问超时。
a)普通http请求的session超时。
b)异步http请求的session超时,使用ext后大部分的界面刷新都是异步的ajax请求。

不管是那种类型的http请求总是可以由一个过滤器来捕捉。
分类:普通http请求的header参数中没有x-requested-with:XMLHttpRequest头信息,而异步的有。
其实对于常见的ajax框架,header中还有标示自己身份的header信息。

对于普通的http请求,发现session超时后直接重定向到一个超时页面,显示访问超时。
对于异步http请求,发现session超时后则向请求的response中写入特定的超时头信息,客户端ajax对象检测
头信息,发现有超时状态标志后调用显示超时信息的javascript方法,提示用户访问超时。

 

服务器端session超时后在过滤器中为response添加新的头信息,标记该请求超时:

Js代码 复制代码
  1. if(r.getHeader("x-requested-with")!=null      
  2.     && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){     
  3.     response.setHeader("sessionstatus","timeout");     
  4. }  

 

使用Ext.Ajaxt对象完成异步请求的交互,Ext.Ajax是单实例对象(非常重要,全局单一Ext.Ajax实例!)。
注册Ext.Ajax的requestcomplete事件,每个ajax请求成功后首先响应该事件。在该事件的回调函数里面判断
访问请求是否超时。使用Ext.Ajax对象的好处是,只需要引入一个包含了几行超时处理代码的js文件,就可以
为当前应用增加超时处理功能,原有代码不需要做任何修改。

 

使用Ext.Ajaxt对象完成异步请求交互,假如checkUserSessionStatus是你的回调方法,每个页面引用:

Js代码 复制代码
  1. Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);   
  2. function checkUserSessionStatus(conn,response,options){   
  3.     //Ext重新封装了response对象   
  4.     if(typeof response.getResponseHeader.sessionstatus != 'undefined'){   
  5.         //发现请求超时,退出处理代码...   
  6.     }   
  7. }  
 

可以利用的几个特性:
a)所有的ajax请求均带有x-requested-with:XMLHttpRequest头信息
b)Ext.Ajax是单实例对象(非常重要,全局单一Ext.Ajax实例!)
c)注册Ext.Ajax的requestcomplete事件,每个ajax请求成功后首先响应该事件(概念类似spring的aop拦截)。

 

对于其他的ajax框架,解决用户访问请求超时这个问题的思路是类似的。

 

在这里推荐一个很实用的Js方法:

Js代码 复制代码
  1. function getRootWin(){   
  2.     var win = window;   
  3.     while (win != win.parent){   
  4.         win = win.parent;   
  5.     }   
  6.     return win;   
  7. }   

 

通过该方法,可以在一个任意深度的iframe中调用父iframe中的方法。具体到这里就是无论哪一个iframe中的用户访

问请求超时,都可以通过该方法调用最外层iframe中的退出方法,这样便为用户提供了一个统一的访问超时退出的UI

呈现。

 

4)系统异常处理

将实际业务代码中的各种异常封装成IOException, ServletException异常,指定过滤器捕获。其余处理思路同
用户访问超时处理。

 

5)添加jquery支持

使用jquery顺手的且希望在Ext项目中同时使用某些jquery插件的时候,添加jquery支持。

页面head中直接添加:

Js代码 复制代码
  1. <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />   
  2.   
  3. <script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script>   
  4. <script type="text/javascript" src="/js/jquery.cookie.js"></script>   
  5. <script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script>   
  6.   
  7. <script type="text/javascript" src="/js/ext/ext-base.js"></script>   
  8. <script type="text/javascript" src="/js/ext/ext-all.js"></script>   
  9. <script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"></script>  

 

6)修改布局

常见的布局一般是:header,center,footer,以及一个位于页面左侧的tree menu。其实对于Ext的UI实现来说,

去掉header,footer也不错,因为Ext的UI本来就做得挺好看再加上去掉header及footer后可以为center增加不

少可视区面积,一个页面还可以显示更多的内容。

应该可以支持这两种布局方式的切换,交给用户选择。
试了几次,在border布局初始化完毕之后再想去掉header,footer区域好像比较麻烦,ext的官方论坛上也说设

计border布局的本意就是应付静态呈现。
但是好像已经有javaeye上的同志实现了动态的border布局呵呵。可以参考一下 EXT2的动态BorderLayout组件

 

7)更换主题

去ext的官网上下载各种主题皮肤 Themes for Ext 2.0

主题皮肤文件拷贝至本地/js/ext/plugins/theme/css/,/js/ext/plugins/theme/images/ 目录

最好将用户选择的主题配置保存在cookie中,这样用户每次登陆都可以使用相同的界面主题。

Ext主题切换:

Js代码 复制代码
  1. if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){   
  2.     Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme'));   
  3. }  

 

8)添加自定义的toolbar图标

直接参考javaeye上的这边文章 共享一些Ext的图标 即可,作者提供的图标很好看,使用也非常简单。

 

9)生成Excel文档
最先参考的资料是extjs论坛上面的这篇文章:GridPanel directly to Excel.
作者思路不错,就是利用javascript直接读取GridPanel的store数据,然后生成一个描述excel文档的xml数据,最后
再通过一个包含了该xml数据的"data" URL下载该excel。
该方法的好处是通用性比较强,生成的excel文档也不难看,并且是不需要服务器端参与处理的一种纯客户端解决方案。
但是最大的缺点是目前IE7不支持(This needs a browser that supports data URLs. FF, Opera and IE8 will support this.)。
而后发现dojochina网站上的一个用户整理和修改了这个生成excel文档的实现方法。

引用
以下的几个问题我都已经整理和修改:
1、没有考虑到含有序号和选择框的grid,
2、utf8转换bug.
3、宽度的bug
4、不支持ie6、ie7和Safari

 

原文地址:官方Grid导出到Excel修正版 (作者给出的代码有些小问题,需要略微进行些调整)

如果是IE浏览器,客户端将以multipart/form-data方式向服务器端提交该xml数据。
原文给出了后台由php实现时的exportexcel.php代码。

 

如果后台由java实现,exportexcel.jsp

Java代码 复制代码
  1. <%@page import="java.util.Date"%>   
  2. <%@page import="org.apache.commons.lang.time.DateFormatUtils"%>   
  3. <%@page import="com.oreilly.servlet.multipart.*"%>   
  4. <%   
  5.     response.setContentType("application/vnd.ms-excel");   
  6.     response.setHeader("Content-disposition","attachment;filename="+   
  7.                        (DateFormatUtils.format(new Date(),"yyyyMMddHHmmss"))+".xls" );    
  8.   
  9.     MultipartParser parse = new MultipartParser(request,1000000000);   
  10.     Part part = null;   
  11.     int maxcount = 0;   
  12.     ParamPart param = null;   
  13.        
  14.     while(true){   
  15.         part = parse.readNextPart();   
  16.         if(part == null || maxcount>1000)   
  17.             break;   
  18.         if(part.isParam() && part.getName().equalsIgnoreCase("exportContent")){   
  19.             param = (ParamPart)part;   
  20.             break;   
  21.         }   
  22.         maxcount++;   
  23.     }   
  24.        
  25.     if(param!=null){   
  26.         response.getWriter().println(param.getStringValue());   
  27.     }else{   
  28.         ;   
  29.     }   
  30. %>  

 

这里使用 com.oreilly.servlet 解析multipart/form-data类型数据。com.oreilly.servlet 很适合文件,表单混合提
交、多文件上传的数据解析。

 

10)js文件管理

凡是这种基于javascript的富客户端解决方案一大问题就是js文件太多。每个页面不仅要导入Ext的css,js文件,
还要导入每个页面应用需要的一些js文件,这样管理起来很麻烦。
原来的情况,至少要导入:

Html代码 复制代码
  1. <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />  
  2.   
  3. <script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script>  
  4. <script type="text/javascript" src="/js/jquery.cookie.js"></script>  
  5. <script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script>  
  6.   
  7. <script type="text/javascript" src="/js/ext/ext-base.js"></script>  
  8. <script type="text/javascript" src="/js/ext/ext-all.js"></script>  
  9. <script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"></script>  
  10. <script type="text/javascript" src="/js/extajax.js"></script>  
  11. <script type="text/javascript" src="/js/exttheme.js"></script>  

 

推荐使用 JSLoader 管理众多的js,css文件
1,编写一个js文件统一管理支持所有公用css,js文件的动态导入

Js代码 复制代码
  1. //添加jquery支持   
  2. JSLoader.loadJavaScript("/js/ext/adapter/jquery/jquery.js");   
  3. JSLoader.loadJavaScript("/js/jquery.cookie.js");   
  4. JSLoader.loadJavaScript("/js/ext/adapter/jquery/ext-jquery-adapter.js");   
  5. //Ext支持   
  6. JSLoader.loadStyleSheet("/js/ext/resources/css/ext-all.css");   
  7. JSLoader.loadJavaScript("/js/ext/ext-base.js");   
  8. JSLoader.loadJavaScript("/js/ext/ext-all.js");   
  9. JSLoader.loadJavaScript("/js/ext/ext-lang-zh_CN.js");   
  10. //加载自定义toolbar图标css样式   
  11. JSLoader.loadStyleSheet("/js/ext/plugins/icon/css/ext-extend.css");   
  12. //加载用户超时,异常处理   
  13. JSLoader.loadJavaScript("/js/extajax.js");   
  14. //主题管理   
  15. JSLoader.loadJavaScript("/js/exttheme.js");   
  16. //Excel导出支持   
  17. JSLoader.loadJavaScript("/js/ext.excel.js");  

2,每个页面只需要引入:

Html代码 复制代码
  1. <script type="text/javascript" src="/js/jsloader.js"></script>  
  2. <script type="text/javascript" src="/js/assets.js"></script>   
http://www.iteye.com/topic/320633


小菜毛毛 2009-05-15 21:16 发表评论
分享到:
评论

相关推荐

    Ext实例新手做项目足够了总结的

    跟着老师做了一个Ext的项目以后总结的例子。新手做项目足够了,包含了Ext的所有的基本问题。

    Ext项目实例 js sevlet

    总结来说,"Ext项目实例 js servlet"涉及的核心是使用ExtJS的组件和数据管理能力,配合Java Servlet进行数据交互,实现动态的Web应用。通过熟练掌握这些知识点,开发者可以构建出功能强大、用户体验优秀的Web应用。

    Ext 学习总结 pdf版

    ### Ext JS 学习总结与理解 #### 一、Ext JS 结构树 在文档的开始部分提到了“Ext JS 结构树”,这部分内容虽然没有给出具体的细节,但...通过学习这些内容,开发者可以更好地掌握Ext JS,并将其应用于实际项目中。

    Ext常用属性总结.doc

    ### Ext常用属性总结 在开发基于Ext JS框架的应用程序时,了解并熟练掌握其核心组件的属性是非常重要的。本文将详细介绍Ext JS中常用的属性及其应用场景,帮助开发者更好地编写高效、可维护的代码。 #### 一、Ext ...

    Ext性能优化总结

    在多年的Ext项目开发过程中,积累了丰富的经验与技巧,下面将这些关键的知识点进行详细的阐述,希望能为同行提供有价值的参考。 #### 一、架构优化:One Page One Application模式 在传统的Web应用中,每个页面的...

    ext3build 整合项目所需文件

    总结起来,"ext3build 整合项目所需文件"是一个涉及构建、配置和打包ext3文件系统资源的过程,这对于Linux项目开发和部署至关重要。通过理解ext3文件系统的工作原理和使用方法,开发者可以更高效地管理项目中的文件...

    390个16x16最完整的Ext项目小图标

    总结来说,"390个16x16最完整的Ext项目小图标"是为Ext项目量身定制的图形资源,它们在Web开发中起到增强用户体验、提升界面美观度和操作便捷性的关键作用。无论是用于Ext JS的组件,还是Asp和Jsp的后台界面,这些...

    项目总结+项目心得体会

    在IT行业中,项目总结与项目心得体会是至关重要的环节,它们能帮助我们提炼经验,提升技能,为未来的项目提供宝贵借鉴。以下将详细讨论这些文件所涵盖的知识点。 首先,我们看到"Ext3.2中文API(最终完成版2010-12-...

    EXT 项目下拉列表多选框 使用示例 含源代码

    总结来说,这个示例提供了一个在Java EXT项目中使用下拉列表多选框的实例,包括配置、数据绑定、事件处理和样式定制等方面,对于初学者或者需要在项目中应用这一功能的开发者来说,是一个非常有价值的参考资料。...

    基于EXT2.0.2表格间数据拖拽

    总结来说,EXT2.0.2的表格间数据拖拽涉及到EXT Grid、DataStore、DragDrop和DropTarget的使用,通过这些组件和接口的组合,开发者可以创建出高度交互、功能丰富的Web应用。实现这一功能需要对EXT的API有深入的理解,...

    Ext2.0教程与实例 开发与实践笔记

    还有"ext-2.0.1.zip",这是Ext2.0的核心库文件,包含了所有必要的JavaScript和CSS资源,供开发者在项目中引用。 总结起来,这个压缩包提供的资源覆盖了Ext2.0的基本使用、实战开发以及JavaFX的图形和动画效果。无论...

    ext.jsb文件

    总结起来,EXT.JSB文件是Eclipse IDE中EXT JS开发的重要辅助工具,它通过提供EXT JS库的元数据,增强了代码编辑器的功能,使开发者能够更加高效地编写EXT JS代码。正确配置和使用EXT.JSB文件,对于提升EXT JS应用的...

    Ext Grid 导出Excel

    总结来说,"Ext Grid 导出Excel"这个话题涵盖了从JavaScript数据结构到Excel文件格式转换的过程,涉及到的主要技术有Ext JS的Grid和Store组件,以及第三方库SheetJS。这个过程对于那些需要提供数据导出功能的Web应用...

    ext UI效果模板

    总结来说,EXT UI效果模板是EXT 3.2.0版本的一个全面的前端界面解决方案,它包含了一系列预设的、易于定制的组件和布局,可以帮助开发者快速构建功能丰富、用户体验优良的Web应用。无论你是要创建一个新的项目,还是...

    ext.net 1.x DEMO

    总结来说,EXT.NET 1.x 提供了一个强大的开发环境,使开发者能够快速构建功能丰富的Web应用。在给定的DEMO中,我们看到了如何利用EXT.NET实现基本的数据操作和拖放功能,这对于物流公司的管理应用是非常实用的。通过...

    转:Ext Designer 可视化设计器及汉化全攻略

    标题:“转:Ext Designer 可视化设计器及汉化全攻略” 这篇博客文章主要探讨了Ext Designer,这是一个强大的JavaScript用户界面设计工具,它允许开发者通过可视化的界面来构建复杂的Ext JS应用。Ext Designer提供...

    Ext开发文档(入门)

    总结,EXT提供了一套完整的前端开发解决方案,从基础的HTML和CSS布局到复杂的UI组件和数据管理。通过环境搭建和文档学习,开发者可以快速掌握EXT的使用,并逐步提升到精通的层次。对于有兴趣深入EXT开发的人员,...

    Ext js 最新学习资料整合 包括API(3.0) cookbook ,in action

    Cookbook通常包含了一系列的技巧、窍门和最佳实践,这些内容是基于实际项目经验总结而来的,能够帮助读者快速上手并提升开发效率。 `Ext JS in Action (MEAP).pdf`是一本专门关于Ext JS的书籍,"MEAP"代表“先行...

    Ext3.0使用示例

    总结,Ext3.0是Linux系统中稳定可靠的文件系统,适用于各种规模的应用场景。结合Struts2等Web开发框架,可以构建出高效、安全的服务器端解决方案。理解并熟练运用这些技术,对于提升Linux服务器管理和Java Web开发...

Global site tag (gtag.js) - Google Analytics