`

extjs 几种使用技巧（转）

ext 
阅读更多
最近也终于使用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代码
1.if(r.getHeader("x-requested-with")!=null     
2.    && r.getHeader("x-requested-with").equalsIgnoreCase("XMLHttpRequest")){    
3.    response.setHeader("sessionstatus","timeout");    
4.} 
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代码
1.Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);  
2.function checkUserSessionStatus(conn,response,options){  
3.    //Ext重新封装了response对象  
4.    if(typeof response.getResponseHeader.sessionstatus != 'undefined'){  
5.        //发现请求超时，退出处理代码...  
6.    }  
7.} 
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代码
1.function getRootWin(){  
2.    var win = window;  
3.    while (win != win.parent){  
4.        win = win.parent;  
5.    }  
6.    return win;  
7.}  
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代码
1.<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />  
2. 
3.<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script>  
4.<script type="text/javascript" src="/js/jquery.cookie.js"></script>  
5.<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script>  
6. 
7.<script type="text/javascript" src="/js/ext/ext-base.js"></script>  
8.<script type="text/javascript" src="/js/ext/ext-all.js"></script>  
9.<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代码
1.if($.cookie('ext.theme') != null && $.cookie('ext.theme') != 'default'){  
2.    Ext.util.CSS.swapStyleSheet("theme","/js/ext/plugins/theme/css/"+$.cookie('ext.theme'));  
3.} 
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代码
1.<%@page import="java.util.Date"%>  
2.<%@page import="org.apache.commons.lang.time.DateFormatUtils"%>  
3.<%@page import="com.oreilly.servlet.multipart.*"%>  
4.<%  
5.    response.setContentType("application/vnd.ms-excel");  
6.    response.setHeader("Content-disposition","attachment;filename="+  
7.                       (DateFormatUtils.format(new Date(),"yyyyMMddHHmmss"))+".xls" );   
8. 
9.    MultipartParser parse = new MultipartParser(request,1000000000);  
10.    Part part = null;  
11.    int maxcount = 0;  
12.    ParamPart param = null;  
13.      
14.    while(true){  
15.        part = parse.readNextPart();  
16.        if(part == null || maxcount>1000)  
17.            break;  
18.        if(part.isParam() && part.getName().equalsIgnoreCase("exportContent")){  
19.            param = (ParamPart)part;  
20.            break;  
21.        }  
22.        maxcount++;  
23.    }  
24.      
25.    if(param!=null){  
26.        response.getWriter().println(param.getStringValue());  
27.    }else{  
28.        ;  
29.    }  
30.%> 
<%@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代码
1.<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" /> 
2. 
3.<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"></script> 
4.<script type="text/javascript" src="/js/jquery.cookie.js"></script> 
5.<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script> 
6. 
7.<script type="text/javascript" src="/js/ext/ext-base.js"></script> 
8.<script type="text/javascript" src="/js/ext/ext-all.js"></script> 
9.<script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"></script> 
10.<script type="text/javascript" src="/js/extajax.js"></script> 
11.<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代码
1.//添加jquery支持  
2.JSLoader.loadJavaScript("/js/ext/adapter/jquery/jquery.js");  
3.JSLoader.loadJavaScript("/js/jquery.cookie.js");  
4.JSLoader.loadJavaScript("/js/ext/adapter/jquery/ext-jquery-adapter.js");  
5.//Ext支持  
6.JSLoader.loadStyleSheet("/js/ext/resources/css/ext-all.css");  
7.JSLoader.loadJavaScript("/js/ext/ext-base.js");  
8.JSLoader.loadJavaScript("/js/ext/ext-all.js");  
9.JSLoader.loadJavaScript("/js/ext/ext-lang-zh_CN.js");  
10.//加载自定义toolbar图标css样式  
11.JSLoader.loadStyleSheet("/js/ext/plugins/icon/css/ext-extend.css");  
12.//加载用户超时,异常处理  
13.JSLoader.loadJavaScript("/js/extajax.js");  
14.//主题管理  
15.JSLoader.loadJavaScript("/js/exttheme.js");  
16.//Excel导出支持  
17.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代码
1.<script type="text/javascript" src="/js/jsloader.js"></script> 
2.<script type="text/javascript" src="/js/assets.js"></script>

原文地址：http://www.iteye.com/topic/320633
分享到：
| ice学习与应用
评论
发表评论

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

相关推荐

    extjs视图设计器

    EXTJS是一种基于JavaScript的富客户端框架，由Sencha公司开发，它提供了一套完整的组件化、可拖拽的界面元素，使得开发者可以快速创建出美观且功能丰富的交互式页面。 EXTJS视图设计器的主要功能包括： 1. **可视...

    extjs3.0开发包含示例api

    EXTJS 3.0是一款基于JavaScript的开源UI框架，它为Web应用提供了丰富的组件和...对于Java开发者来说，EXTJS 3.0提供了一种与后端无缝集成的前端解决方案，可以利用其强大的客户端能力减轻服务器负担，提升用户体验。

    轻松搞定Extjs

    - **行选择模型**: 介绍了几种不同的行选择模型及其应用场景。 - **Grid视图**: 讲解了如何配置Grid视图，包括排序、过滤等功能。 #### GridPanel分页 当表格中的数据量较大时，分页功能就显得尤为重要。 - **...

    EXTJS开发总结.pdf

    在使用EXTJS时，有几点需要注意： 1. 尽量利用EXTJS的API，如`Ext.fly`、`Ext.createChild`和`Ext.on`等，以减少对DOM操作的直接处理。 2. 利用EXTJS的自定义事件机制，实现组件间的通信和事件处理。 3. 合并所有`...

    Extjs自动最大化panel

    在EXTJS中，"Extjs自动最大化panel"是一种高级布局技术，它允许用户创建一个能够自动适应并填充其容器的面板（Panel）。这种特性对于构建响应式和自适应的用户界面至关重要，尤其在现代Web应用中，用户期望界面能够...

    Extjs in action

    - **编码实现**：使用ExtJS提供的API和工具编写组件代码。 - **测试与调试**：确保组件按预期工作，并进行必要的优化调整。 - **扩展功能**：考虑组件未来的扩展性，预留接口以便添加新特性。 ### 四、数据驱动的...

    ExtJS使用笔记

    ExtJS由几个关键部分组成，包括Ext Core（核心），这是使用ExtJS框架的基础。UI部分提供了一整套用户界面组件，比如面板、窗口、标签页、布局管理器和表单等。ExtJS的引用通常是通过script标签引入Ext.js文件开始的...

    ExtJs源码上传和下载

    ExtJs是一种基于JavaScript的开源富客户端框架，专为构建企业级Web应用程序而设计。它提供了大量的组件和功能，包括布局管理、数据绑定、强大的图表、表单控件等，使得开发者能够创建出交互性强、用户体验良好的网页...

    Extjs4.0视频教程和源代码，另附文档翻译

    - **不同类型的Proxy**：详细介绍了几种常用的Proxy类型，如AjaxProxy、RestProxy等，以及它们的应用场景。 - **配置和使用Proxy**：通过实例演示了如何配置不同的Proxy类型，并在实际项目中使用它们。 ### 读写器...

    ExtJS Web应用程序开发指南（第2版）.zip

    - 了解JavaScript的基本语法和面向对象编程是使用ExtJS的前提，书中的前几章可能讲解了这些基础知识。 - ExtJS扩展了JavaScript，引入了自己的类系统和MVC（模型-视图-控制器）架构，开发者需要理解这些概念。 3....

    ExtJS4.2 MVC

    MVC（Model-View-Controller）模式是软件工程中一种广泛使用的架构设计，它有助于将应用程序的业务逻辑、用户界面和数据管理分离开来，提高代码的可维护性和可扩展性。 在ExtJS4.2中，MVC的实现包括以下几个核心...

    php+extjs资料

    PHP（Hypertext Preprocessor）是一种广泛使用的开源脚本语言，主要用于Web开发，可以嵌入到HTML中使用。它的语法简单易懂，且功能强大，支持多种数据库连接，因此在网页后端开发中占据着重要地位。EXTJS则是一款...

    Extjs复习笔记（二十）-- tree和grid结合

    在EXTJS这个强大的JavaScript框架中，Tree和Grid是两种非常重要的组件，它们分别用于展示层次结构的数据和表格数据。在实际应用中，有时我们需要将这两种数据展现方式结合起来，以提供更丰富的用户界面和交互体验。...

    ExtJs实现数据加载和提交经典代码

    根据提供的文件信息，我们可以深入探讨如何在ExtJS中利用FormPanel进行数据加载和提交的核心概念与实践技巧。 ### FormPanel的Form对象 在ExtJS框架中，`FormPanel`是处理表单数据的一个核心组件。当我们在使用`...

    ExtJS PPT

    具体来说，EXTJS的事件监听有以下几种方式： 1. **`addListener` (或 `on`) 方法：**这是最常用的添加事件监听器的方式，例如`component.addListener('click', handlerFunction)`。这会在指定组件上监听'click'事件...

    extjs动态表单

    ExtJS 动态表单是基于Sencha ExtJS框架实现的一种灵活、可扩展的表单设计方式，它允许开发者在运行时动态地创建、修改或加载表单组件，以适应不同场景下的数据输入需求。在Web应用开发中，动态表单通常用于处理不...

    extjs学习

    ExtJS 是一种基于 JavaScript 的富客户端应用开发框架，主要用于构建桌面级的Web应用程序。它提供了大量的组件库，包括表格、面板、菜单、按钮等，使得开发者可以构建出具有桌面应用般交互体验的网页应用。本学习...

    Extjs资料集合（源码解读，实例）

    2. **EXT提交服务器的三种方式.doc**：文档可能详细介绍了在 ExtJS 中如何进行数据的提交，比如使用 AJAX、Store 和 Proxy 等方式与服务器进行通信，这在实际开发中是至关重要的。 3. **Ext技术**：这可能是一个更...

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