使用Ext 总结

 1、项目使用GBK编码时，使用EXT提交中文时出现乱码(中文字数为偶然个时不会，为奇数个时才会)。

      解决方法(实在没有找到更好的办法而为之)：

     当要提交的中文字数为奇数个时，在其最后加上一个汉字，然后到了后台再删除。

   

以下部分引用：http://www.javaeye.com/topic/320633?page=1

 

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

handleResponse的createInterceptor方法是在方法执行前运行，返回false后面的方法就不执行了，要继续执行就返回true。

还有个createSequence方法是在方法执行后运行，这两个方法差不多就构成了ext基本的AOP了哟

 

 

可以利用的几个特性：
a）所有的ajax请求均带有x-requested-with:XMLHttpRequest头信息
b）Ext.Ajax是单实例对象（非常重要，全局单一Ext.Ajax实例！）
c）注册Ext.Ajax的requestcomplete事件，每个ajax请求成功后首先响应该事件（概念类似spring的aop拦截）。

 

对于其他的ajax框架，解决用户访问请求超时这个问题的思路是类似的。

 

4、更换主题

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

 

5、添加自定义的toolbar图标

直接参考javaeye上的这边文章 共享一些Ext的图标 即可，作者提供的图标很好看，使用也非常简单。

6、js文件管理

凡是这种基于javascript的富客户端解决方案一大问题就是js文件太多。每个页面不仅要导入Ext的css,js文件，
还要导入每个页面应用需要的一些js文件，这样管理起来很麻烦。
原来的情况，至少要导入：

<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" mce_href="js/ext/resources/css/ext-all.css" /> <mce:script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js" mce_src="js/ext/adapter/jquery/jquery.js"></mce:script> <mce:script type="text/javascript" src="/js/jquery.cookie.js" mce_src="js/jquery.cookie.js"></mce:script> <mce:script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js" mce_src="js/ext/adapter/jquery/ext-jquery-adapter.js"></mce:script> <mce:script type="text/javascript" src="/js/ext/ext-base.js" mce_src="js/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="/js/ext/ext-all.js" mce_src="js/ext/ext-all.js"></mce:script> <mce:script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js" mce_src="js/ext/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript" src="/js/extajax.js" mce_src="js/extajax.js"></mce:script> <mce:script type="text/javascript" src="/js/exttheme.js" mce_src="js/exttheme.js"></mce: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，每个页面只需要引入：

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