首页 > 代码库 > EXTJS和javaweb应用的开发思路

EXTJS和javaweb应用的开发思路

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

1.多少个jsp合适呢?没有特殊要求的话,2个就可以,一个是login,一个是系统主页。登录页一般需要比较花哨,单独做一页,页号套用样式;主页则包含主要的布局,功能,而功能靠extjs来实现。对于一些特殊的页面,比如需要特定http头的页面/activex控件,只能单独用一个页面去搞,在Extjs中可以使用Panel里面的html属性指定一个iframe来加载此页面。

2.获得登录用户相关的信息。这个我使用服务器端程序生成一个mime类型为javascript的page。可以是servlet/action之类的东西,然后再首页上当作js文件来引用。这样就不需要用ajax去服务器取,效率较高其运行稳定。如果这有的信息需要更新,比如用户修改了自己的真实姓名,可以重新加载这个服务器端的js,我用了jquery的$.getScript方式来更新,也就是用户修改自己的信息成功后,调用$.getScript(‘userdata.action‘)这种方式。


3.登录超时的判断。这里需要2种判断:1是用户刷新主页面,这就用普通的Filter来判断,超时了就跳回登录页;2时ajax请求的时候判断超时,当然也是用filter,但是直接用js无法获得这个信息,需要加点处理,比如没有超时,给httpHeader增加个sessionstatus=pass这样的值,

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

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		
		
			SysUtil.getCurrentUser(req);
			UserInfo currentUser = SysUtil.getCurrentUser(req);//从session中获得当前用户的对象
			if(currentUser != null){
				((HttpServletResponse)response).setHeader("sessionstatus", "pass");
			}
		
		chain.doFilter(request, response);
	}

在客户端,用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文件里的内容相对容易。而基于extjs或者其他js界面框架的程序,js文件肯定很多,而且大部分都需要在系统主页上引用,这很可能造成查找一个函数很吃力的情况,也不利于编写清晰的代码。所以必须使用闭包来把各个功能里面的js函数区分开。比如可以用ProjectName.modelName这种方式来分包,比如创建用户列表的函数位于UserInfo.js里面,此可以这样写:

var MyProject.UserInfo = {};//MyProject应该在主js文件中定义,如var MyProject = {};
MyProject.UserInfo.createUserList = function(){
   //创建用户列表面板的代码。。。
}


EXTJS和javaweb应用的开发思路