`
jef
  • 浏览: 117371 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

近期的ext项目总结

EXT项目管理jQueryAjaxExcel 
阅读更多

最近也终于使用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");  
}

 

使用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'){
		//发现请求超时，退出处理代码...
	}
}
 

可以利用的几个特性：
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;
}

 

通过该方法，可以在一个任意深度的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>

 

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'));
}

 

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{
		;
	}
%>

 

这里使用 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>

 

推荐使用 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");

2，每个页面只需要引入：

<script type="text/javascript" src="/js/jsloader.js"></script>
<script type="text/javascript" src="/js/assets.js"></script>

 

分享到：
| Spring 2.x AOP 配置方式整理
评论
19 楼 wu_jiaxiang 2009-02-17  
EXTJS做出的效果确实很炫，可惜性能欠佳！！
18 楼 jef 2009-02-17  
edokeh 写道
if("XMLHttpRequest".equalsIgnoreCase(r.getHeader("x-requested-with")){
    response.setHeader("sessionstatus","timeout");     
}


这样写好点，呵呵

是的啊，谢谢 
17 楼 edokeh 2009-02-17   
if("XMLHttpRequest".equalsIgnoreCase(r.getHeader("x-requested-with")){
    response.setHeader("sessionstatus","timeout");     
}


这样写好点，呵呵
16 楼 zivpiggy 2009-02-16  
不错，要是早两天看到这文章就好了，那个excel导出之前弄了我一天。
15 楼 flyfan 2009-02-14  
不错，我很快也开始我的第一个EXT项目了，学习一下，谢谢你的分享
14 楼 jef 2009-02-14  
hanfeng 写道
引用
getRootWin()


这个方法的功能和直接用 top 有差别吗？

之前还真没用过，回头我也试试。
13 楼 hanfeng 2009-02-14  
引用
getRootWin()


这个方法的功能和直接用 top 有差别吗？
12 楼 southgate 2009-02-13  
不错 领会了思路了
在项目中试试看
11 楼 tanleihaoren 2009-02-13  
建议使用gwt或者gxt。
10 楼 rocky143 2009-02-13  
写的很好，很受用！
9 楼 Artkai 2009-02-03  
<div class="quote_title">jef 写道</div>
<div class="quote_div">
<div class="quote_title">Artkai 写道</div>
<div class="quote_div">c）注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件（概念类似spring的aop拦截）。 <br /><br />这个如何注册？？能否给点代码？？</div>
<br /><br />类似这样，假如checkUserSessionStatus是你的回调方法，每个页面引用： <br />
<pre name="code" class="java">Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
//Ext重新封装了response对象
if(typeof response.getResponseHeader.sessionstatus != 'undefined'){
//发现请求超时，退出处理代码...
}
}
</pre>
</div>
<p><br /></p>
<p> 这样的话，requestcomplete事件就不能用了，我们项目中是重载Ext.data.Connection类的handleResponse方法：</p>
<pre name="code" class="js">if(Ext.data.Connection){
    Ext.override(Ext.data.Connection,{
        handleResponse : function(response){
            var resultData = response.responseText;
            if('logout'==resultData){
                alert("未登陆或过期,请重新登陆");
                window.self.close();
                return;
            }
            this.transId = false;
            var options = response.argument.options;
            response.argument = options ? options.argument : null;
            this.fireEvent("requestcomplete", this, response, options);
            Ext.callback(options.success, options.scope, [response, options]);
            Ext.callback(options.callback, options.scope, [options, true, response]);
        }
    });
}</pre>
<p> </p>
8 楼 jef 2009-02-02  
Artkai 写道
c）注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件（概念类似spring的aop拦截）。

这个如何注册？？能否给点代码？？


类似这样，假如checkUserSessionStatus是你的回调方法，每个页面引用： 
Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
	//Ext重新封装了response对象
	if(typeof response.getResponseHeader.sessionstatus != 'undefined'){
		//发现请求超时，退出处理代码...
	}
}
7 楼 Artkai 2009-02-02  
c）注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件（概念类似spring的aop拦截）。

这个如何注册？？能否给点代码？？
6 楼 jef 2009-02-01  
不好意思，可能描述的不太清楚，一会补充一下。

引用
EXT项目中还加入JQUERY，有些不解，EXT中的DOM操作和查询不比JQUERY差多少。

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

引用
response直接write的话会把原来页面上的东西替换掉的巴,有实际例子不???

不是在response里面直接write，而是为response添加新的头信息，例如检测到超时请求后： 
if(r.getHeader("x-requested-with")!=null 
	&& r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){
	response.setHeader("sessionstatus","timeout");
}
5 楼 huangyh 2009-02-01  
很好，谢谢分享
4 楼 stworthy 2009-02-01  
EXT项目中还加入JQUERY，有些不解，EXT中的DOM操作和查询不比JQUERY差多少。
3 楼 southgate 2009-01-31  
我也用ext做了一个项目
不过ajax请求我没有特别处理,以前不知道原来head不一样
现在茅塞顿开
不过是不是指教一下怎么
"向请求的response中写入特定的超时头信息，客户端ajax对象检测头信息，发现有超时状态标志后调用显示超时信息的javascript方法，提示用户访问超时。"

response直接write的话会把原来页面上的东西替换掉的巴,有实际例子不???
2 楼 lelejpmc 2009-01-29  
nice summarizatioin !
1 楼 bigeyex 2009-01-28  
写得相当好啊！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

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

    Ext性能优化总结

    多年Ext项目开发后，总结的经验，希望对大家有益。

    EXT学习笔记-项目应用实践

    开发EXT的过程中总结的一些使用技巧。关于EXT对象封装的一些应用。

    快意编程EXT JS Web开发技术详解.part3

    　《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结，它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法，从而帮助软件设计人员快速掌握Ext JS开发技术的...

    Ext6.0官方包

    这是ext6.0官方包,因为很多人不太会配置6.0,所以我特地弄了一个配置好的ext6.0项目以及具体配置步骤,方便那些初学者少走弯路.本来想免费提供给大家,但是发现csdn最少也许2积分.对于新学javaweb的同学,我之前总结了很...

    Ext JS框架 经验之作2000页

    Ext案例总结 最牛的JS框架 泣血大作 分享网友

    快意编程EXT JS Web开发技术详解.part2

    　《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结，它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法，从而帮助软件设计人员快速掌握Ext JS开发技术的...

    快意编程EXT JS Web开发技术详解.part1

    　《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结，它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法，从而帮助软件设计人员快速掌握Ext JS开发技术的...

    快意编程 EXT JS Web开发技术详解.pdf

    《快意编程:Ext JS Web开发技术详解》是笔者在多年项目开发过程中的经验总结，它通过丰富的实例由浅入深、循序渐进地介绍了目前采用Ext JS进行Web开发的使用方法，从而帮助软件设计人员快速掌握Ext JS开发技术的使用...

    Ext拖动实例树和表格全

    最近项目需要，研究了一下ext 的拖动效果,现在做一些总结，c趁现在还清醒，怕以后忘记： 设置拖放的一些通用属性：enableDrag – 是否可拖动 enableDrop : 是可放置 isTarget : 是否为目标 ddGroup：“拖放组名” ...

    Ext 今日学习总结

    今天头儿分了一个项目的一张页面给我做！要修改几个问题！一个按F5局部刷新Grid网格中数据！第二个：网格一些信息是双击打开就已经读取！

    extjs 折叠布局

    ext js简单的折叠布局 自己总结的 根据项目的需要可以使用

    extjs4 项目例子

    这个项目里面包含了本人从开始初学EXTJS4的全部事例：...我也是一个第一次接触EXT的初学者，只希望能与大家共享、学习，许多不到的地方希望大家能体谅，用myeclipse8.6运行项目，数据库用mysql，大家给力，免费下载。

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    最近涉及到的一个项目中，需要实现ComboBoxTree的效果，首先，看看效果吧…… 在Extjs中是没有这种效果的，所以得自己写，在网络上看了看别人的资料，自己再总结了一下，修改了一下，代码如下： 代码如下: Ext.ux....

    ExtJS中文乱码之GBK格式编码解决方案及代码

    这几天做后台看了一些Ext的知识，在切入工作项目的时候出现了乱码情况，所以就总结了这篇ExtJS中文乱码之GBK格式编码解决办法的文章，作为记录。 1、具体情况： 在引入： 代码如下:&lt;title&gt;Ext-学习|测试项目&...

    一个多层架构多种数据库结合NHibernate和Ext.Net实现用户增删除改查的小例子

    使用NHibernate的总结 1，hibernate.cfg.xml放在Web项目的Bin文件夹下，以嵌入资源的形式 2，hibernate.cfg.xml文件中加入这个配置节，这样可以把实体配置文件放在Model项目下，以嵌入资源的形式 3, 读取不到数据...

    一个多层架构多种数据库结合NHibernate和Ext.Net及Newtonsoft.Json实现用户增删除改查的小例子

    使用NHibernate的总结 1，hibernate.cfg.xml放在Web项目的Bin文件夹下，以嵌入资源的形式 2，hibernate.cfg.xml文件中加入这个配置节，这样可以把实体配置文件放在Model项目下，以嵌入资源的形式 3, 读取不到数据...

    js特效总结_手风琴_导航_轮换图片_放大镜等

    js特效总结_手风琴_导航_轮换图片_放大镜等希望有喜欢的下载 还有[Ext、jquery项目的 qq390491408]

    Json库的使用总结

    1、 如何将List变成Json字符串 2 2、 如何将一个对象变成Json字符串 2 ...5、 在Ext中，如何将data变成Json串 3 6、 如何获取类的属性名串 3 7、 排除指定的字段 3 同进提供所使用的json-lib-2.2.1-jdk15.jar

Magicbox
Global site tag (gtag.js) - Google Analytics