jef
- 浏览: 118763 次
- 性别:
- 来自: 北京
-
最新评论
-
hubiao0629：
讲的非常详细。
Netty 3.1 中文用户手册（二）-开始 -
foreverwcy：
Netty 3.1 中文用户手册（二）-开始 -
Technoboy：
yin_bp 写道呵呵，正好要用netty，先学习一下，另外请 ...
Netty 3.1 中文用户手册（二）-开始 -
bewithme：
不错，顶你。
Netty 3.1 中文用户手册（二）-开始 -
oopye：
oopye 写道感谢LZ分享，因为execution问题被困了 ...
Spring 2.x AOP 配置方式整理
最近也终于使用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
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>
分享到：
评论
39 楼
weoln
2009-11-11
给一个Extjs grid导出Excel的通用版本，解决了Ext Grid导出Excel在JSP等环境中文乱码问题（支持Windows和Aix）：
http://blog.csdn.net/weoln/archive/2009/11/02/4758861.aspx
http://blog.csdn.net/weoln/archive/2009/11/02/4758861.aspx
38 楼
javaAlpha
2009-11-09
最近也是在使用ext 做一个项目，但是使用到SSH时，运行太慢了。
37 楼
acheng
2009-10-18
<div class="quote_title">Artkai 写道</div>
<div class="quote_div">
<div class="quote_title">kstg750718 写道</div>
<div class="quote_div">
<div class="quote_title">Artkai 写道</div>
<div class="quote_div">
<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> </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>
</div>
<p>感觉重载handleResponse方法还是比较巧妙..赞..<img src="/images/smiles/icon_wink.gif" alt=""></p>
</div>
<p><br>嘿嘿~~ 原来是没打算再说的，但是发现还是有兄弟赞同我的，所以我再给个更优雅的方法吧，无意中研究出来的：^_^</p>
<pre name="code" class="js">Ext.override(Ext.data.Connection, {
handleResponse : Ext.data.Connection.prototype.handleResponse.createInterceptor(
function(response) {
var resultData = response.responseText;
if('logout'==resultData){
alert("未登陆或过期,请重新登陆");
window.self.close();
return false;
}
return true;
})
});</pre>
<p> handleResponse的createInterceptor方法是在方法执行前运行，返回false后面的方法就不执行了，要继续执行就返回true。</p>
<p>还有个createSequence方法是在方法执行后运行，这两个方法差不多就构成了ext基本的AOP了哟^_^</p>
</div>
<p> </p>
<p>照您的思路，做实验，firefox报错。</p>
<p>提示：Ext.data.Connection.prototype.handleResponse 未定义！！！</p>
<p> </p>
<p>通过firefox 的firebug查看DOM发现 Ext.data.Connection.prototype中.handleResponse 确实未定义，故不能创建 Intercptor。</p>
<p>请详细回答下，谢谢</p>
<p><br><br></p>
<div class="quote_div">
<div class="quote_title">kstg750718 写道</div>
<div class="quote_div">
<div class="quote_title">Artkai 写道</div>
<div class="quote_div">
<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> </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>
</div>
<p>感觉重载handleResponse方法还是比较巧妙..赞..<img src="/images/smiles/icon_wink.gif" alt=""></p>
</div>
<p><br>嘿嘿~~ 原来是没打算再说的，但是发现还是有兄弟赞同我的，所以我再给个更优雅的方法吧，无意中研究出来的：^_^</p>
<pre name="code" class="js">Ext.override(Ext.data.Connection, {
handleResponse : Ext.data.Connection.prototype.handleResponse.createInterceptor(
function(response) {
var resultData = response.responseText;
if('logout'==resultData){
alert("未登陆或过期,请重新登陆");
window.self.close();
return false;
}
return true;
})
});</pre>
<p> handleResponse的createInterceptor方法是在方法执行前运行，返回false后面的方法就不执行了，要继续执行就返回true。</p>
<p>还有个createSequence方法是在方法执行后运行，这两个方法差不多就构成了ext基本的AOP了哟^_^</p>
</div>
<p> </p>
<p>照您的思路，做实验，firefox报错。</p>
<p>提示：Ext.data.Connection.prototype.handleResponse 未定义！！！</p>
<p> </p>
<p>通过firefox 的firebug查看DOM发现 Ext.data.Connection.prototype中.handleResponse 确实未定义，故不能创建 Intercptor。</p>
<p>请详细回答下，谢谢</p>
<p><br><br></p>
36 楼
不落天空
2009-05-22
楼主辛苦了，学习下
35 楼
llyzq
2009-05-14
收藏，等做完实验性项目之后再学习
34 楼
myclover
2009-03-19
第一次就做成这样了就已经很不错了啊
33 楼
zhenjw
2009-03-18
在做页面时JS的调试是一个比较麻烦的事，有没有什么好的工具可以用。
32 楼
wh8766
2009-03-16
来仔细研究下了。。
31 楼
zhangwei62766
2009-03-15
<div class="quote_title">jef 写道</div>
<div class="quote_div">
<p>最近也终于使用ext做了一个小的web项目。第一次使用ext做项目毕竟经验不足，仅记下一些开发思路和需要注意的地方。</p>
<p> </p>
<p>Ext Js 2.2+Spring 2.5,没有使用struts,hibernate</p>
<p> </p>
<p><strong>1）目录结构</strong> </p>
<p>a）js部分</p>
<p>根目录下建立/js/ext/目录，存放所有和ext相关的js文件。/js/ext/目录下可建立ext相关子目录</p>
<p>/js/ext/adapter/ — 存放适配器jquery,prototype,yui。。。</p>
<p>/js/ext/experimental/ — 存放ext一些未正式推出的组件，可参考ext开发包examples例子部分。</p>
<p>/js/ext/plugins/ — 存放ext扩展组件，例如ext的patch文件，ext主题，扩展组建等等。</p>
<p>/js/ext/resources/ — 不用说了，ext开发包中的resources目录直接拷贝。</p>
<p>/js/ — 目录下可以放一些最常用 的js文件。</p>
<p>/js/ext/ — 目录下放置ext-all.js，ext-base.js，ext-lang-zh_CN.js，ext核心文件；</p>
<p>b）模块部分</p>
<p>根目录下建立/module/文件夹，每个模块在/module/目录下新建文件夹，例如：</p>
<p>/module/comment/ — 评论模块</p>
<p>/module/stat/ — 统计模块</p>
<p>每个模块目录下新建js目录存放当前模块需要引用的js文件，例如/module/comment/js/comment.js</p>
<p>为简化开发不使用struts，直接使用jsp代替struts；每个模块下新建action.jsp替代structs接受</p>
<p>ext ajax请求，action.jsp不负责页面的显示。只负责service层方法调用及请求跳转。</p>
<p>c）权限部分</p>
<p>根目录下直接建一个security目录完事。</p>
<p><strong>2）基本布局及权限</strong> </p>
<p>border布局，center区域使用TabPanel组建增加新的iframe窗口装载系统不同模块。</p>
<p>暂不在意iframe的效率问题，尽可能做到每个系统模块+UI部分的独立。</p>
<p>初始化布局时TabPanel组件中添加默认的欢迎登录页面，解决TabPanel组件添加新窗口时高度增加的bug。</p>
<p>权限系统设计参考spring security建议的数据库设计，项目后期可与spring security整合。</p>
<p><strong>3）用户访问超时</strong> </p>
<p>解决两种情况下的用户访问超时。<br />a）普通http请求的session超时。<br />b）异步http请求的session超时，使用ext后大部分的界面刷新都是异步的ajax请求。<br /><br />不管是那种类型的http请求总是可以由一个过滤器来捕捉。<br />分类：普通http请求的header参数中没有x-requested-with:XMLHttpRequest头信息，而异步的有。<br />其实对于常见的ajax框架，header中还有标示自己身份的header信息。<br /><br />对于普通的http请求，发现session超时后直接重定向到一个超时页面，显示访问超时。<br />对于异步http请求，发现session超时后则向请求的response中写入特定的超时头信息，客户端ajax对象检测<br />头信息，发现有超时状态标志后调用显示超时信息的javascript方法，提示用户访问超时。</p>
<p> </p>
<p>服务器端session超时后在过滤器中为response添加新的头信息，标记该请求超时：</p>
<pre name="code" class="js">if(r.getHeader("x-requested-with")!=null
&& r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){
response.setHeader("sessionstatus","timeout");
}</pre>
<p> </p>
<p>使用Ext.Ajaxt对象完成异步请求的交互，Ext.Ajax是单实例对象（非常重要，全局单一Ext.Ajax实例！）。<br />注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件。在该事件的回调函数里面判断<br />访问请求是否超时。使用Ext.Ajax对象的好处是，只需要引入一个包含了几行超时处理代码的js文件，就可以<br />为当前应用增加超时处理功能，原有代码不需要做任何修改。 </p>
<p> </p>
<p>使用Ext.Ajaxt对象完成异步请求交互，假如checkUserSessionStatus是你的回调方法，每个页面引用： </p>
<pre name="code" class="js">Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
//Ext重新封装了response对象
if(typeof response.getResponseHeader.sessionstatus != 'undefined'){
//发现请求超时，退出处理代码...
}
}</pre>
<p>可以利用的几个特性：<br />a）所有的ajax请求均带有x-requested-with:XMLHttpRequest头信息<br />b）Ext.Ajax是单实例对象（非常重要，全局单一Ext.Ajax实例！）<br />c）注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件（概念类似spring的aop拦截）。 </p>
<p> </p>
<p>对于其他的ajax框架，解决用户访问请求超时这个问题的思路是类似的。</p>
<p> </p>
<p>在这里推荐一个很实用的Js方法：</p>
<pre name="code" class="js">function getRootWin(){
var win = window;
while (win != win.parent){
win = win.parent;
}
return win;
}
</pre>
<p> </p>
<p>通过该方法，可以在一个任意深度的iframe中调用父iframe中的方法。具体到这里就是无论哪一个iframe中的用户访</p>
<p>问请求超时，都可以通过该方法调用最外层iframe中的退出方法，这样便为用户提供了一个统一的访问超时退出的UI</p>
<p>呈现。</p>
<p> </p>
<p><strong>4）系统异常处理</strong> </p>
<p>将实际业务代码中的各种异常封装成IOException, ServletException异常，指定过滤器捕获。其余处理思路同<br />用户访问超时处理。</p>
<p> </p>
<p><strong>5）添加jquery支持</strong> </p>
<p>使用jquery顺手的且希望在Ext项目中同时使用某些jquery插件的时候，添加jquery支持。</p>
<p>页面head中直接添加：</p>
<pre name="code" class="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></pre>
<p> </p>
<p><strong>6）修改布局</strong> </p>
<p>常见的布局一般是：header,center,footer,以及一个位于页面左侧的tree menu。其实对于Ext的UI实现来说，</p>
<p>去掉header,footer也不错，因为Ext的UI本来就做得挺好看再加上去掉header及footer后可以为center增加不</p>
<p>少可视区面积，一个页面还可以显示更多的内容。<br /><br />应该可以支持这两种布局方式的切换，交给用户选择。<br />试了几次，在border布局初始化完毕之后再想去掉header,footer区域好像比较麻烦，ext的官方论坛上也说设</p>
<p>计border布局的本意就是应付静态呈现。<br />但是好像已经有javaeye上的同志实现了动态的border布局呵呵。可以参考一下 <a href="http://nihongye.iteye.com/blog/222701">EXT2的动态BorderLayout组件</a> 。</p>
<p> </p>
<p><strong>7）更换主题</strong> </p>
<p>去ext的官网上下载各种主题皮肤 <a href="http://extjs.com/blog/2008/03/03/can-ext-be-skinned-of-course/">Themes for Ext 2.0</a> </p>
<p>主题皮肤文件拷贝至本地/js/ext/plugins/theme/css/,/js/ext/plugins/theme/images/ 目录</p>
<p>最好将用户选择的主题配置保存在cookie中，这样用户每次登陆都可以使用相同的界面主题。</p>
<p>Ext主题切换：</p>
<pre name="code" class="js">if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){
Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme'));
}</pre>
<p> </p>
<p><strong>8）添加自定义的toolbar图标</strong> </p>
<p>直接参考javaeye上的这边文章 <a href="/topic/289010">共享一些Ext的图标</a> 即可，作者提供的图标很好看，使用也非常简单。</p>
<p> </p>
<p><strong>9）生成Excel文档</strong> <br />最先参考的资料是extjs论坛上面的这篇文章：<a href="http://extjs.com/forum/showthread.php?t=32400">GridPanel directly to Excel.</a> <br />作者思路不错，就是利用javascript直接读取GridPanel的store数据，然后生成一个描述excel文档的xml数据，最后<br />再通过一个包含了该xml数据的"data" URL下载该excel。<br />该方法的好处是通用性比较强，生成的excel文档也不难看，并且是不需要服务器端参与处理的一种纯客户端解决方案。<br />但是最大的缺点是目前IE7不支持（This needs a browser that supports data URLs. FF, Opera and IE8 will support this.）。<br />而后发现dojochina网站上的一个用户整理和修改了这个生成excel文档的实现方法。</p>
<div class="quote_title">引用 </div>
<div class="quote_div">以下的几个问题我都已经整理和修改：<br />1、没有考虑到含有序号和选择框的grid，<br />2、utf8转换bug.<br />3、宽度的bug<br />4、不支持ie6、ie7和Safari</div>
<p> </p>
<p>原文地址：<a href="http://www.dojochina.com/index.php?q=node/1254">官方Grid导出到Excel修正版</a> （作者给出的代码有些小问题，需要略微进行些调整）<br /><br />如果是IE浏览器，客户端将以multipart/form-data方式向服务器端提交该xml数据。<br />原文给出了后台由php实现时的exportexcel.php代码。</p>
<p> </p>
<p>如果后台由java实现，exportexcel.jsp</p>
<pre name="code" class="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{
;
}
%></pre>
<p> </p>
<p>这里使用 <a href="http://www.servlets.com/cos/">com.oreilly.servlet</a> 解析multipart/form-data类型数据。<a href="http://www.servlets.com/cos/">com.oreilly.servlet</a> 很适合文件，表单混合提<br />交、多文件上传的数据解析。</p>
<p> </p>
<p><strong>10）js文件管理</strong> </p>
<p>凡是这种基于javascript的富客户端解决方案一大问题就是js文件太多。每个页面不仅要导入Ext的css,js文件，<br />还要导入每个页面应用需要的一些js文件，这样管理起来很麻烦。<br />原来的情况，至少要导入：</p>
<pre name="code" class="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></pre>
<p> </p>
<p>推荐使用 <a href="http://www.jsloader.com/">JSLoader</a> 管理众多的js，css文件<br />1，编写一个js文件统一管理支持所有公用css，js文件的动态导入</p>
<pre name="code" class="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");
</pre>
<p>2，每个页面只需要引入：</p>
<pre name="code" class="html"><script type="text/javascript" src="/js/jsloader.js"></script>
<script type="text/javascript" src="/js/assets.js"></script> </pre>
<p> </p>
</div>
<p> </p>
<div class="quote_div">
<p>最近也终于使用ext做了一个小的web项目。第一次使用ext做项目毕竟经验不足，仅记下一些开发思路和需要注意的地方。</p>
<p> </p>
<p>Ext Js 2.2+Spring 2.5,没有使用struts,hibernate</p>
<p> </p>
<p><strong>1）目录结构</strong> </p>
<p>a）js部分</p>
<p>根目录下建立/js/ext/目录，存放所有和ext相关的js文件。/js/ext/目录下可建立ext相关子目录</p>
<p>/js/ext/adapter/ — 存放适配器jquery,prototype,yui。。。</p>
<p>/js/ext/experimental/ — 存放ext一些未正式推出的组件，可参考ext开发包examples例子部分。</p>
<p>/js/ext/plugins/ — 存放ext扩展组件，例如ext的patch文件，ext主题，扩展组建等等。</p>
<p>/js/ext/resources/ — 不用说了，ext开发包中的resources目录直接拷贝。</p>
<p>/js/ — 目录下可以放一些最常用 的js文件。</p>
<p>/js/ext/ — 目录下放置ext-all.js，ext-base.js，ext-lang-zh_CN.js，ext核心文件；</p>
<p>b）模块部分</p>
<p>根目录下建立/module/文件夹，每个模块在/module/目录下新建文件夹，例如：</p>
<p>/module/comment/ — 评论模块</p>
<p>/module/stat/ — 统计模块</p>
<p>每个模块目录下新建js目录存放当前模块需要引用的js文件，例如/module/comment/js/comment.js</p>
<p>为简化开发不使用struts，直接使用jsp代替struts；每个模块下新建action.jsp替代structs接受</p>
<p>ext ajax请求，action.jsp不负责页面的显示。只负责service层方法调用及请求跳转。</p>
<p>c）权限部分</p>
<p>根目录下直接建一个security目录完事。</p>
<p><strong>2）基本布局及权限</strong> </p>
<p>border布局，center区域使用TabPanel组建增加新的iframe窗口装载系统不同模块。</p>
<p>暂不在意iframe的效率问题，尽可能做到每个系统模块+UI部分的独立。</p>
<p>初始化布局时TabPanel组件中添加默认的欢迎登录页面，解决TabPanel组件添加新窗口时高度增加的bug。</p>
<p>权限系统设计参考spring security建议的数据库设计，项目后期可与spring security整合。</p>
<p><strong>3）用户访问超时</strong> </p>
<p>解决两种情况下的用户访问超时。<br />a）普通http请求的session超时。<br />b）异步http请求的session超时，使用ext后大部分的界面刷新都是异步的ajax请求。<br /><br />不管是那种类型的http请求总是可以由一个过滤器来捕捉。<br />分类：普通http请求的header参数中没有x-requested-with:XMLHttpRequest头信息，而异步的有。<br />其实对于常见的ajax框架，header中还有标示自己身份的header信息。<br /><br />对于普通的http请求，发现session超时后直接重定向到一个超时页面，显示访问超时。<br />对于异步http请求，发现session超时后则向请求的response中写入特定的超时头信息，客户端ajax对象检测<br />头信息，发现有超时状态标志后调用显示超时信息的javascript方法，提示用户访问超时。</p>
<p> </p>
<p>服务器端session超时后在过滤器中为response添加新的头信息，标记该请求超时：</p>
<pre name="code" class="js">if(r.getHeader("x-requested-with")!=null
&& r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){
response.setHeader("sessionstatus","timeout");
}</pre>
<p> </p>
<p>使用Ext.Ajaxt对象完成异步请求的交互，Ext.Ajax是单实例对象（非常重要，全局单一Ext.Ajax实例！）。<br />注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件。在该事件的回调函数里面判断<br />访问请求是否超时。使用Ext.Ajax对象的好处是，只需要引入一个包含了几行超时处理代码的js文件，就可以<br />为当前应用增加超时处理功能，原有代码不需要做任何修改。 </p>
<p> </p>
<p>使用Ext.Ajaxt对象完成异步请求交互，假如checkUserSessionStatus是你的回调方法，每个页面引用： </p>
<pre name="code" class="js">Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);
function checkUserSessionStatus(conn,response,options){
//Ext重新封装了response对象
if(typeof response.getResponseHeader.sessionstatus != 'undefined'){
//发现请求超时，退出处理代码...
}
}</pre>
<p>可以利用的几个特性：<br />a）所有的ajax请求均带有x-requested-with:XMLHttpRequest头信息<br />b）Ext.Ajax是单实例对象（非常重要，全局单一Ext.Ajax实例！）<br />c）注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件（概念类似spring的aop拦截）。 </p>
<p> </p>
<p>对于其他的ajax框架，解决用户访问请求超时这个问题的思路是类似的。</p>
<p> </p>
<p>在这里推荐一个很实用的Js方法：</p>
<pre name="code" class="js">function getRootWin(){
var win = window;
while (win != win.parent){
win = win.parent;
}
return win;
}
</pre>
<p> </p>
<p>通过该方法，可以在一个任意深度的iframe中调用父iframe中的方法。具体到这里就是无论哪一个iframe中的用户访</p>
<p>问请求超时，都可以通过该方法调用最外层iframe中的退出方法，这样便为用户提供了一个统一的访问超时退出的UI</p>
<p>呈现。</p>
<p> </p>
<p><strong>4）系统异常处理</strong> </p>
<p>将实际业务代码中的各种异常封装成IOException, ServletException异常，指定过滤器捕获。其余处理思路同<br />用户访问超时处理。</p>
<p> </p>
<p><strong>5）添加jquery支持</strong> </p>
<p>使用jquery顺手的且希望在Ext项目中同时使用某些jquery插件的时候，添加jquery支持。</p>
<p>页面head中直接添加：</p>
<pre name="code" class="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></pre>
<p> </p>
<p><strong>6）修改布局</strong> </p>
<p>常见的布局一般是：header,center,footer,以及一个位于页面左侧的tree menu。其实对于Ext的UI实现来说，</p>
<p>去掉header,footer也不错，因为Ext的UI本来就做得挺好看再加上去掉header及footer后可以为center增加不</p>
<p>少可视区面积，一个页面还可以显示更多的内容。<br /><br />应该可以支持这两种布局方式的切换，交给用户选择。<br />试了几次，在border布局初始化完毕之后再想去掉header,footer区域好像比较麻烦，ext的官方论坛上也说设</p>
<p>计border布局的本意就是应付静态呈现。<br />但是好像已经有javaeye上的同志实现了动态的border布局呵呵。可以参考一下 <a href="http://nihongye.iteye.com/blog/222701">EXT2的动态BorderLayout组件</a> 。</p>
<p> </p>
<p><strong>7）更换主题</strong> </p>
<p>去ext的官网上下载各种主题皮肤 <a href="http://extjs.com/blog/2008/03/03/can-ext-be-skinned-of-course/">Themes for Ext 2.0</a> </p>
<p>主题皮肤文件拷贝至本地/js/ext/plugins/theme/css/,/js/ext/plugins/theme/images/ 目录</p>
<p>最好将用户选择的主题配置保存在cookie中，这样用户每次登陆都可以使用相同的界面主题。</p>
<p>Ext主题切换：</p>
<pre name="code" class="js">if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){
Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme'));
}</pre>
<p> </p>
<p><strong>8）添加自定义的toolbar图标</strong> </p>
<p>直接参考javaeye上的这边文章 <a href="/topic/289010">共享一些Ext的图标</a> 即可，作者提供的图标很好看，使用也非常简单。</p>
<p> </p>
<p><strong>9）生成Excel文档</strong> <br />最先参考的资料是extjs论坛上面的这篇文章：<a href="http://extjs.com/forum/showthread.php?t=32400">GridPanel directly to Excel.</a> <br />作者思路不错，就是利用javascript直接读取GridPanel的store数据，然后生成一个描述excel文档的xml数据，最后<br />再通过一个包含了该xml数据的"data" URL下载该excel。<br />该方法的好处是通用性比较强，生成的excel文档也不难看，并且是不需要服务器端参与处理的一种纯客户端解决方案。<br />但是最大的缺点是目前IE7不支持（This needs a browser that supports data URLs. FF, Opera and IE8 will support this.）。<br />而后发现dojochina网站上的一个用户整理和修改了这个生成excel文档的实现方法。</p>
<div class="quote_title">引用 </div>
<div class="quote_div">以下的几个问题我都已经整理和修改：<br />1、没有考虑到含有序号和选择框的grid，<br />2、utf8转换bug.<br />3、宽度的bug<br />4、不支持ie6、ie7和Safari</div>
<p> </p>
<p>原文地址：<a href="http://www.dojochina.com/index.php?q=node/1254">官方Grid导出到Excel修正版</a> （作者给出的代码有些小问题，需要略微进行些调整）<br /><br />如果是IE浏览器，客户端将以multipart/form-data方式向服务器端提交该xml数据。<br />原文给出了后台由php实现时的exportexcel.php代码。</p>
<p> </p>
<p>如果后台由java实现，exportexcel.jsp</p>
<pre name="code" class="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{
;
}
%></pre>
<p> </p>
<p>这里使用 <a href="http://www.servlets.com/cos/">com.oreilly.servlet</a> 解析multipart/form-data类型数据。<a href="http://www.servlets.com/cos/">com.oreilly.servlet</a> 很适合文件，表单混合提<br />交、多文件上传的数据解析。</p>
<p> </p>
<p><strong>10）js文件管理</strong> </p>
<p>凡是这种基于javascript的富客户端解决方案一大问题就是js文件太多。每个页面不仅要导入Ext的css,js文件，<br />还要导入每个页面应用需要的一些js文件，这样管理起来很麻烦。<br />原来的情况，至少要导入：</p>
<pre name="code" class="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></pre>
<p> </p>
<p>推荐使用 <a href="http://www.jsloader.com/">JSLoader</a> 管理众多的js，css文件<br />1，编写一个js文件统一管理支持所有公用css，js文件的动态导入</p>
<pre name="code" class="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");
</pre>
<p>2，每个页面只需要引入：</p>
<pre name="code" class="html"><script type="text/javascript" src="/js/jsloader.js"></script>
<script type="text/javascript" src="/js/assets.js"></script> </pre>
<p> </p>
</div>
<p> </p>
30 楼
myclover
2009-03-10
不开源吗？？？
写得很好啊~~~~~~~~~~~~··
写得很好啊~~~~~~~~~~~~··
29 楼
Artkai
2009-03-05
<div class="quote_title">kstg750718 写道</div>
<div class="quote_div">
<div class="quote_title">Artkai 写道</div>
<div class="quote_div">
<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> </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>
</div>
<p>感觉重载handleResponse方法还是比较巧妙..赞..<img src="/images/smiles/icon_wink.gif" alt="" /></p>
</div>
<p><br />嘿嘿~~ 原来是没打算再说的，但是发现还是有兄弟赞同我的，所以我再给个更优雅的方法吧，无意中研究出来的：^_^</p>
<pre name="code" class="js">Ext.override(Ext.data.Connection, {
handleResponse : Ext.data.Connection.prototype.handleResponse.createInterceptor(
function(response) {
var resultData = response.responseText;
if('logout'==resultData){
alert("未登陆或过期,请重新登陆");
window.self.close();
return false;
}
return true;
})
});</pre>
<p> handleResponse的createInterceptor方法是在方法执行前运行，返回false后面的方法就不执行了，要继续执行就返回true。</p>
<p>还有个createSequence方法是在方法执行后运行，这两个方法差不多就构成了ext基本的AOP了哟^_^</p>
<div class="quote_div">
<div class="quote_title">Artkai 写道</div>
<div class="quote_div">
<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> </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>
</div>
<p>感觉重载handleResponse方法还是比较巧妙..赞..<img src="/images/smiles/icon_wink.gif" alt="" /></p>
</div>
<p><br />嘿嘿~~ 原来是没打算再说的，但是发现还是有兄弟赞同我的，所以我再给个更优雅的方法吧，无意中研究出来的：^_^</p>
<pre name="code" class="js">Ext.override(Ext.data.Connection, {
handleResponse : Ext.data.Connection.prototype.handleResponse.createInterceptor(
function(response) {
var resultData = response.responseText;
if('logout'==resultData){
alert("未登陆或过期,请重新登陆");
window.self.close();
return false;
}
return true;
})
});</pre>
<p> handleResponse的createInterceptor方法是在方法执行前运行，返回false后面的方法就不执行了，要继续执行就返回true。</p>
<p>还有个createSequence方法是在方法执行后运行，这两个方法差不多就构成了ext基本的AOP了哟^_^</p>
28 楼
kstg750718
2009-02-25
<div class="quote_title">Artkai 写道</div>
<div class="quote_div">
<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> </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>
</div>
<p>感觉重载handleResponse方法还是比较巧妙..赞..<img src="/images/smiles/icon_wink.gif" alt="" /></p>
<div class="quote_div">
<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> </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>
</div>
<p>感觉重载handleResponse方法还是比较巧妙..赞..<img src="/images/smiles/icon_wink.gif" alt="" /></p>
27 楼
aroundall
2009-02-24
非常不错，很好的参考。
26 楼
jef
2009-02-22
<div class="quote_title">引用</div>
<div class="quote_div">可以详细介绍下JSLoader怎么在Ext 2.2.1的项目中应用么？</div>
<p>目前我也仅是使用了Jsloader的最基本的用法，没有深入研究过。但是感觉Jsloader是值得好好研究一下的，也许在做效率优化的时候可以用到上。<br /><br />目前还没有针对这个项目做任何效率方面的优化。但至少到目前为止，没有觉得效率是一个严重的问题。有这方面经验的话会补充一下。<br />Ext js 3.0也马上就要推出了，看看 <a href="http://www.extjs.com/products/extjs/roadmap.php" target="_blank">Ext JS Road Map</a> 吧。</p>
<div class="quote_title">引用</div>
<div class="quote_div">拒绝iframe，我的extjs项目中，一个iframe都不用！ </div>
<p>只是想用iframe最大限度的隔离代码。</p>
<p> </p>
<div class="quote_div">可以详细介绍下JSLoader怎么在Ext 2.2.1的项目中应用么？</div>
<p>目前我也仅是使用了Jsloader的最基本的用法，没有深入研究过。但是感觉Jsloader是值得好好研究一下的，也许在做效率优化的时候可以用到上。<br /><br />目前还没有针对这个项目做任何效率方面的优化。但至少到目前为止，没有觉得效率是一个严重的问题。有这方面经验的话会补充一下。<br />Ext js 3.0也马上就要推出了，看看 <a href="http://www.extjs.com/products/extjs/roadmap.php" target="_blank">Ext JS Road Map</a> 吧。</p>
<div class="quote_title">引用</div>
<div class="quote_div">拒绝iframe，我的extjs项目中，一个iframe都不用！ </div>
<p>只是想用iframe最大限度的隔离代码。</p>
<p> </p>
25 楼
peacock
2009-02-20
拒绝iframe，我的extjs项目中，一个iframe都不用！
24 楼
lee_elidong
2009-02-20
可以详细介绍下JSLoader怎么在Ext 2.2.1的项目中应用么？
23 楼
taotao6086
2009-02-18
导出excel的不多.正好有个需求要导出.但是导出的样子比较变态.
22 楼
xinghai017
2009-02-18
楼主的代码和大家的点评都很不错。顶
21 楼
379548695
2009-02-17
导出那个楼主搞得不错哈。
20 楼
dayone
2009-02-17
很好，收藏
发表评论
相关推荐
跟着老师做了一个Ext的项目以后总结的例子。新手做项目足够了，包含了Ext的所有的基本问题。
总结来说，"Ext项目实例 js servlet"涉及的核心是使用ExtJS的组件和数据管理能力，配合Java Servlet进行数据交互，实现动态的Web应用。通过熟练掌握这些知识点，开发者可以构建出功能强大、用户体验优秀的Web应用。
### Ext JS 学习总结与理解 #### 一、Ext JS 结构树 在文档的开始部分提到了“Ext JS 结构树”，这部分内容虽然没有给出具体的细节，但...通过学习这些内容，开发者可以更好地掌握Ext JS，并将其应用于实际项目中。
### Ext常用属性总结 在开发基于Ext JS框架的应用程序时，了解并熟练掌握其核心组件的属性是非常重要的。本文将详细介绍Ext JS中常用的属性及其应用场景，帮助开发者更好地编写高效、可维护的代码。 #### 一、Ext ...
总结来说，"390个16x16最完整的Ext项目小图标"是为Ext项目量身定制的图形资源，它们在Web开发中起到增强用户体验、提升界面美观度和操作便捷性的关键作用。无论是用于Ext JS的组件，还是Asp和Jsp的后台界面，这些...
在多年的Ext项目开发过程中，积累了丰富的经验与技巧，下面将这些关键的知识点进行详细的阐述，希望能为同行提供有价值的参考。 #### 一、架构优化：One Page One Application模式 在传统的Web应用中，每个页面的...
总结起来，"ext3build 整合项目所需文件"是一个涉及构建、配置和打包ext3文件系统资源的过程，这对于Linux项目开发和部署至关重要。通过理解ext3文件系统的工作原理和使用方法，开发者可以更高效地管理项目中的文件...
在IT行业中，项目总结与项目心得体会是至关重要的环节，它们能帮助我们提炼经验，提升技能，为未来的项目提供宝贵借鉴。以下将详细讨论这些文件所涵盖的知识点。 首先，我们看到"Ext3.2中文API(最终完成版2010-12-...
总结来说，这个示例提供了一个在Java EXT项目中使用下拉列表多选框的实例，包括配置、数据绑定、事件处理和样式定制等方面，对于初学者或者需要在项目中应用这一功能的开发者来说，是一个非常有价值的参考资料。...
EXT，全称Ext JS，是一种基于JavaScript的前端框架，用于构建富互联网应用程序（RIA）。它提供了丰富的组件库，包括各种用户界面元素，如表格...在实际开发中，可以根据项目需求灵活运用这些方法和配置，提升用户体验。
还有"ext-2.0.1.zip"，这是Ext2.0的核心库文件，包含了所有必要的JavaScript和CSS资源，供开发者在项目中引用。 总结起来，这个压缩包提供的资源覆盖了Ext2.0的基本使用、实战开发以及JavaFX的图形和动画效果。无论...
总结来说，EXT.NET 1.x 提供了一个强大的开发环境，使开发者能够快速构建功能丰富的Web应用。在给定的DEMO中，我们看到了如何利用EXT.NET实现基本的数据操作和拖放功能，这对于物流公司的管理应用是非常实用的。通过...
总结来说，EXT UI效果模板是EXT 3.2.0版本的一个全面的前端界面解决方案，它包含了一系列预设的、易于定制的组件和布局，可以帮助开发者快速构建功能丰富、用户体验优良的Web应用。无论你是要创建一个新的项目，还是...
总结来说，EXT2.0.2的表格间数据拖拽涉及到EXT Grid、DataStore、DragDrop和DropTarget的使用，通过这些组件和接口的组合，开发者可以创建出高度交互、功能丰富的Web应用。实现这一功能需要对EXT的API有深入的理解，...
总结起来，EXT.JSB文件是Eclipse IDE中EXT JS开发的重要辅助工具，它通过提供EXT JS库的元数据，增强了代码编辑器的功能，使开发者能够更加高效地编写EXT JS代码。正确配置和使用EXT.JSB文件，对于提升EXT JS应用的...
总结，EXT提供了一套完整的前端开发解决方案，从基础的HTML和CSS布局到复杂的UI组件和数据管理。通过环境搭建和文档学习，开发者可以快速掌握EXT的使用，并逐步提升到精通的层次。对于有兴趣深入EXT开发的人员，...
总结来说，虽然提供的内容主要围绕创建一个ASP.NET Web应用，但我们可以推断，EXT4环境搭建涉及到的步骤可能包括： 1. 安装Windows上的Linux模拟环境，如Cygwin或MinGW。 2. 获取Linux内核头文件和EXT4相关的开发库...
总结来说，"ext-1.0-alpha3 含说明文档"是一个预发布的软件扩展，包含详细的使用说明，适用于开发和测试环境。开发者可以通过阅读文档，学习如何在项目中集成和使用这个EXT扩展，以提升软件的功能和用户体验。
总结一下，本项目中的"Ext下拉树、下拉表格"涉及了Ext组件的使用，包括下拉树和下拉表格的创建、数据模型的定义、以及与输入框的结合。由于项目资源中未包含Ext的基础文件，需要开发者自行准备并添加到项目中。通过...
要引用Ext，首先需要将Ext的相关文件下载并解压到本地项目中。在项目的适当位置添加以下代码以引入Ext的资源： ```html <link rel="stylesheet" type="text/css" href="../script/ext/resources/css/ext-all.css" /...