- 浏览: 61883 次
- 性别:
- 来自: 成都
文章分类
最新评论
最近也终于使用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添加新的头信息,标记该请求超时:
- if(r.getHeader("x-requested-with")!=null
- && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){
- response.setHeader("sessionstatus","timeout");
- }
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是你的回调方法,每个页面引用:
- Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);
- function checkUserSessionStatus(conn,response,options){
- //Ext重新封装了response对象
- if(typeof response.getResponseHeader.sessionstatus != 'undefined'){
- //发现请求超时,退出处理代码...
- }
- }
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方法:
- function getRootWin(){
- var win = window;
- while (win != win.parent){
- win = win.parent;
- }
- return win;
- }
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中直接添加:
- <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
- <script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script>
- <script type="text/javascript" src="/js/jquery.cookie.js"></script>
- <script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script>
- <script type="text/javascript" src="/js/ext/ext-base.js"></script>
- <script type="text/javascript" src="/js/ext/ext-all.js"></script>
- <script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"></script>
<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script> <script type="text/javascript" src="/js/jquery.cookie.js"></script> <script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script> <script type="text/javascript" src="/js/ext/ext-base.js"></script> <script type="text/javascript" src="/js/ext/ext-all.js"></script> <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主题切换:
- if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){
- Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme'));
- }
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
- <%@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{
- ;
- }
- %>
<%@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文件,这样管理起来很麻烦。
原来的情况,至少要导入:
- <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
- <script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script>
- <script type="text/javascript" src="/js/jquery.cookie.js"></script>
- <script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script>
- <script type="text/javascript" src="/js/ext/ext-base.js"></script>
- <script type="text/javascript" src="/js/ext/ext-all.js"></script>
- <script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"></script>
- <script type="text/javascript" src="/js/extajax.js"></script>
- <script type="text/javascript" src="/js/exttheme.js"></script>
<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" /> <script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script> <script type="text/javascript" src="/js/jquery.cookie.js"></script> <script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script> <script type="text/javascript" src="/js/ext/ext-base.js"></script> <script type="text/javascript" src="/js/ext/ext-all.js"></script> <script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="/js/extajax.js"></script> <script type="text/javascript" src="/js/exttheme.js"></script>
推荐使用 JSLoader 管理众多的js,css文件
1,编写一个js文件统一管理支持所有公用css,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");
//添加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,每个页面只需要引入:
- <script type="text/javascript" src="/js/jsloader.js"></script>
- <script type="text/javascript" src="/js/assets.js"></script>
发表评论
-
ExtJs学习入门--之HELLOWORLD
2009-05-05 06:43 992ExtJs学习入门 Posted on 2009 ... -
Ext布局类的介绍与使用(转黄灯桥的专栏)
2009-05-05 06:54 643摘要: Ext布局类的介绍与使用 在WEB应用的 ... -
ExtJs 的进度的实现(转)
2009-05-05 06:58 1231ExtJs实现进度条实例,很酷,很简单.. ... -
ExtJs制作菜单导航
2009-05-05 07:00 1872摘要: 本菜单的效果 ... -
EXT新手 建议建立自己的工具箱
2009-05-15 07:06 819我认为学习EXT开发最好的方法是,在真正开发之前,掌握好高级J ... -
Tutorial:EXT简介 1
2009-05-15 08:24 711Tutorial:Introduction to Ext 2. ... -
Firefox使用Firebug中debug
2009-05-18 01:30 5505Firefox使用Firebug中debug视图下的step ... -
Ext 2简述
2009-05-18 01:42 635有关重大改变的几个要点 文章内容是对2.0新变化的综合简述。 ... -
EXT新手建议:建立自己的工具箱
2009-05-18 01:44 642我认为学习EXT开发最好的方法是,在真正开发之前,掌握好高级J ... -
轻松地进入Ext的世界--firefox debug
2009-05-18 02:21 1393Tutorial:Playing With Ext The E ... -
Javascript的调试利器:Firebug使用详解
2009-06-04 02:13 942摘要: 转载自:http://blog.csdn.n ... -
《轻松搞定Extjs》顺利发布 (转)
2009-06-15 04:25 1433《轻松搞定Extjs》顺利发布 《转载》 PDF下载地 ...
相关推荐
跟着老师做了一个Ext的项目以后总结的例子。新手做项目足够了,包含了Ext的所有的基本问题。
多年Ext项目开发后,总结的经验,希望对大家有益。
开发EXT的过程中总结的一些使用技巧。关于EXT对象封装的一些应用。
《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结,它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法,从而帮助软件设计人员快速掌握Ext JS开发技术的...
这是ext6.0官方包,因为很多人不太会配置6.0,所以我特地弄了一个配置好的ext6.0项目以及具体配置步骤,方便那些初学者少走弯路.本来想免费提供给大家,但是发现csdn最少也许2积分.对于新学javaweb的同学,我之前总结了很...
Ext案例总结 最牛的JS框架 泣血大作 分享网友
《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结,它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法,从而帮助软件设计人员快速掌握Ext JS开发技术的...
《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结,它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法,从而帮助软件设计人员快速掌握Ext JS开发技术的...
《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结,它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法,从而帮助软件设计人员快速掌握Ext JS开发技术的使用...
最近项目需要,研究了一下ext 的拖动效果,现在做一些总结,c趁现在还清醒,怕以后忘记: 设置拖放的一些通用属性:enableDrag – 是否可拖动 enableDrop : 是可放置 isTarget : 是否为目标 ddGroup:“拖放组名” ...
今天头儿分了一个项目的一张页面给我做!要修改几个问题!一个按F5局部刷新Grid网格中数据!第二个:网格一些信息是双击打开就已经读取!
ext js简单的折叠布局 自己总结的 根据项目的需要可以使用
这个项目里面包含了本人从开始初学EXTJS4的全部事例:...我也是一个第一次接触EXT的初学者,只希望能与大家共享、学习,许多不到的地方希望大家能体谅,用myeclipse8.6运行项目,数据库用mysql,大家给力,免费下载。
最近涉及到的一个项目中,需要实现ComboBoxTree的效果,首先,看看效果吧…… 在Extjs中是没有这种效果的,所以得自己写,在网络上看了看别人的资料,自己再总结了一下,修改了一下,代码如下: 代码如下: Ext.ux....
这几天做后台看了一些Ext的知识,在切入工作项目的时候出现了乱码情况,所以就总结了这篇ExtJS中文乱码之GBK格式编码解决办法的文章,作为记录。 1、具体情况: 在引入: 代码如下:<title>Ext-学习|测试项目&...
使用NHibernate的总结 1,hibernate.cfg.xml放在Web项目的Bin文件夹下,以嵌入资源的形式 2,hibernate.cfg.xml文件中加入这个配置节,这样可以把实体配置文件放在Model项目下,以嵌入资源的形式 3, 读取不到数据...
使用NHibernate的总结 1,hibernate.cfg.xml放在Web项目的Bin文件夹下,以嵌入资源的形式 2,hibernate.cfg.xml文件中加入这个配置节,这样可以把实体配置文件放在Model项目下,以嵌入资源的形式 3, 读取不到数据...
js特效总结_手风琴_导航_轮换图片_放大镜等希望有喜欢的下载 还有[Ext、jquery项目的 qq390491408]
1、 如何将List变成Json字符串 2 2、 如何将一个对象变成Json字符串 2 ...5、 在Ext中,如何将data变成Json串 3 6、 如何获取类的属性名串 3 7、 排除指定的字段 3 同进提供所使用的json-lib-2.2.1-jdk15.jar