java extjs_EXTJS和javaweb应用的开发思路

近期。做些几个基于extjs界面的应用。在此。总结一下要点。标题是基于javaweb，可是基本上各种server端语言都适用。使用Extjs做界面，无非就是取消了原来非常多的jsp文件，转而使用Extjs来訪问，但有些地方多少有些不方便，下面是我自己遇到的问题和经验。

1.多少个jsp合适呢？没有特殊要求的话，2个就能够，一个是login，一个是系统主页。登录页一般须要比較花哨。单独做一页。比較easy套用样式；主页则包括基本的布局。功能，而功能靠extjs来实现。对于一些特殊的页面。比方须要特定html头(doctype/指定特定的ie版本号等)的页面/activex控件，仅仅能单独用一个页面去搞，在Extjs中能够使用Panel里面的html属性指定一个iframe来载入此页面。

2.获得登录用户相关的信息或者server端信息(如当前日期，js里的时间非常多时候须要真正的当前日期，而不是client上的时间。不靠谱啊)。这个我使用server端程序生成一个mime类型为text/javascript的page。能够是servlet/action之类的东西，然后再首页上当作js文件来引用。

这样就不须要用ajax去server取，效率较高其执行稳定。假设这有的信息须要更新。比方用户改动了自己的真实姓名，能够又一次载入这个server端的js。我用了jquery的$.getScript方式来更新。也就是用户改动自己的信息成功后，调用$.getScript('userdata.action',callback)这样的方式。

3.登录超时的推断。

这里须要2种推断：1是用户刷新主页面，这就用普通的Filter来推断，超时了就跳回登录页；2时ajax请求的时候推断超时。当然也是用filter。可是用js构建界面无法响应filter中进行的跳转，须要加点处理。让js能够获得超时的信息，并用js进行跳转。

比方没有超时，给httpHeader添加个sessionstatus=pass这种值，

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

HttpServletRequest req = (HttpServletRequest)request;

Member currentMember = SysUtil.getCurrentMember(req);//获得当前登录用户

HttpServletResponse rep = ((HttpServletResponse)response);

if(currentMember != null){

rep.setHeader("sessionstatus", "pass");

chain.doFilter(request, response);

}}

server端filter的代码可能是这样：

在client，用Extjs的Ajax事件进行捕捉，比如：

Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);

function checkUserSessionStatus(conn,response,options){

//alert("checkUserSessionStatus")

//Ext又一次封装了response对象

if(response.getResponseHeader){

var sessionstatus = response.getResponseHeader("sessionstatus");

if(sessionstatus != 'pass'){

alert("登录超时，又一次进入系统");

window.location = "login.jsp";

}

}

}

4.javascript闭包的使用。在普通页面里能够不用闭包。由于页面引用的js相对较少，无用的js文件能够不引用，要找个js文件中的内容相对easy。

而基于extjs或者其它js界面框架的程序，js文件肯定非常多，并且大部分都须要在系统主页上引用，这非常可能造成查找一个函数非常吃力的情况，也不利于编写清晰的代码。所以必须使用闭包来把各个功能里面的js函数区分开。比方能够用ProjectName.modelName这样的方式来分包，比方创建用户列表的函数位于UserInfo.js里面，此能够这样写：

var MyProject.UserInfo = {};//MyProject应该在主js文件里定义，如var MyProject = {};

MyProject.UserInfo.createUserList = function(){

//创建用户列表面板的代码。。

。

}