x-requested-with

最近也终于使用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代码 
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是你的回调方法，每个页面引用： 

Js代码 
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方法： 

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中直接添加： 

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>  

<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主题切换： 

Js代码 
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 

Java代码 
<%@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文件，这样管理起来很麻烦。 
原来的情况，至少要导入： 

Html代码 
<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文件的动态导入 

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，每个页面只需要引入： 

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

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