extjs使用技巧

lovemosic

贡献于2013-08-06

字数:9963 关键词: ExtJS JavaScript框架

 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.} if(r.getHeader("x-requested-with")!=null && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){ response.setHeader("sessionstatus","timeout"); } 使用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.} Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this); function checkUserSessionStatus(conn,response,options){ //Ext重新封装了response对象 if(typeof response.getResponseHeader.sessionstatus != 'undefined'){ //发现请求超时,退出处理代码... } } 可以利用的几个特性: 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.} function getRootWin(){ var win = window; while (win != win.parent){ win = win.parent; } return win; } 通过该方法,可以在一个任意深度的iframe中调用父iframe中的方法。具体到这里就是无论哪一个iframe中的用户访 问请求超时,都可以通过该方法调用最外层iframe中的退出方法,这样便为用户提供了一个统一的访问超时退出的UI 呈现。 4)系统异常处理 将实际业务代码中的各种异常封装成IOException, ServletException异常,指定过滤器捕获。其余处理思路同 用户访问超时处理。 5)添加jquery支持 使用jquery顺手的且希望在Ext项目中同时使用某些jquery插件的时候,添加jquery支持。 页面head中直接添加: Js代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 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.} if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){ Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme')); } 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.%> <%@page import="java.util.Date"%> <%@page import="org.apache.commons.lang.time.DateFormatUtils"%> <%@page import="com.oreilly.servlet.multipart.*"%> <% response.setContentType("application/vnd.ms-excel"); response.setHeader("Content-disposition","attachment;filename="+ (DateFormatUtils.format(new Date(),"yyyyMMddHHmmss"))+".xls" ); MultipartParser parse = new MultipartParser(request,1000000000); Part part = null; int maxcount = 0; ParamPart param = null; while(true){ part = parse.readNextPart(); if(part == null || maxcount>1000) break; if(part.isParam() && part.getName().equalsIgnoreCase("exportContent")){ param = (ParamPart)part; break; } maxcount++; } if(param!=null){ response.getWriter().println(param.getStringValue()); }else{ ; } %> 这里使用 com.oreilly.servlet 解析multipart/form-data类型数据。com.oreilly.servlet 很适合文件,表单混合提 交、多文件上传的数据解析。 10)js文件管理 凡是这种基于javascript的富客户端解决方案一大问题就是js文件太多。每个页面不仅要导入Ext的css,js文件, 还要导入每个页面应用需要的一些js文件,这样管理起来很麻烦。 原来的情况,至少要导入: Html代码 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 推荐使用 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"); //添加jquery支持 JSLoader.loadJavaScript("/js/ext/adapter/jquery/jquery.js"); JSLoader.loadJavaScript("/js/jquery.cookie.js"); JSLoader.loadJavaScript("/js/ext/adapter/jquery/ext-jquery-adapter.js"); //Ext支持 JSLoader.loadStyleSheet("/js/ext/resources/css/ext-all.css"); JSLoader.loadJavaScript("/js/ext/ext-base.js"); JSLoader.loadJavaScript("/js/ext/ext-all.js"); JSLoader.loadJavaScript("/js/ext/ext-lang-zh_CN.js"); //加载自定义toolbar图标css样式 JSLoader.loadStyleSheet("/js/ext/plugins/icon/css/ext-extend.css"); //加载用户超时,异常处理 JSLoader.loadJavaScript("/js/extajax.js"); //主题管理 JSLoader.loadJavaScript("/js/exttheme.js"); //Excel导出支持 JSLoader.loadJavaScript("/js/ext.excel.js"); 2,每个页面只需要引入: Html代码 1. 2.

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 2 金币 [ 分享文档获得金币 ]
0 人已下载

下载文档

相关文档