Extjs作为前台的界面展示是非常好的框架,ajax技术的使用使得B/S系统犹如C/S一般。
下面的实例是extjs与struts2整合的实例,网上的实例写的都挺好,但我发现配置文件往往很少写出来的。
1.struts2 jar包的引入:
在上次的图片中,括号的是要格外加入的json 包,struts2支持josn要用到这个,有人说是josn的拦截器。
2.struts2的代码:
import com.opensymphony.xwork2.ActionSupport;
public class JsonAction extends ActionSupport{
private int id;
private String name;
private String password;
@Override
public String execute() throws Exception {
System.out.println("****************");//检测extjs前端的函数不是不访问改action
this.id = 5;
this.name = "chenwei";
this.password = "123456";
return "success";
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
3.struts2的配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="true" />
<constant name="struts.objectFactory" value="spring" />
<package name="ext" extends="json-default">
<action name="jsonAction1" class="json.actions.JsonAction">
<result type="json" name="success">
<param name="includeProperties">id,name,password</param>
</result>
</action>
</package>
</struts>
这里需说明的是:“success”是struts2的action中的方法返回的值,解释到以后就执行这个result,有的老师或者朋友写着的是:action的方法返回的null,这样可能也行,但是我测试好多次就是搞不出来。
其实我觉得和一般的返回是一样的,返回什么字符串(比如success,error等等),result接到相应的字符串,就执行相应result.
下面是最重要的说明:
<param name="includeProperties">id,name,password</param>
name="includeProperties"中的includeProperties是固定的参数名字,一共有三个,还有两个是root和excludeProperties。
使用方法:
includeProperties 参数:输出结果中需要包含的属性值,这里正则表达式和属性名匹配,可以用“,”分割填充多个正则表达式。
如<param name="includeProperties">module.*,user\.userName</param> 表示是module的所有属性及用户的用户名
excludeProperties 参数:输出结果需要排除的属性值,也支持正则表达式匹配属性名,可以用“,”分割填充多个正则表达式,类同includeProperties。
实例的意思就是把三个设置的值,id,name,password暴露出来,让extjs接受。这样struts2端就写好了。
extjs代码:
Ext.onReady(function(){
var vstore = new Ext.data.JsonStore({//定单的数据
autoDestory:true,
url:'jsonAction1.action',
//root:'lists',这个字段可以在探究下,有朋友如有有兴趣一起讨论下QQ1019990976 注明jsonstore
//totalProperty:"rowCount",//总的记录数据
idProperty:'id',
fields:["id","name","password"]
});
var grid = new Ext.grid.GridPanel({
title:"高级管理员",
store:vstore,
columns:[{header:"ID", dataIndex:"id",width:20},
{header:"采购单号", dataIndex:"name",width:100},
{header:"采购日期", dataIndex:"password",width:100}
]
});
vstore.load();
new Ext.Viewport({
layout:"border",
items:[{
title:"超级管理员界面",
region:"north",
html:"<center>基于Extjs的缺陷管理系统</center>",
//html:"<img src='head1.jsp'/>",
height:100
},{
region:"west",
title:"功能菜单",
width:150,
items:menu,
split:true
},{
region:"center",
title:"主区域",
//layout:"fit",
id:"mainContent",
items:grid
}]
});
});
html的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试界面</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GBK">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="testext/3.js"></script>
</head>
<body>
</body>
</html>
这样就OK了。
后续工作是:Set list map 还有自己定义的类比如 Page 里面有三个字段这样的实体类 怎么传递到extjs中去,这个是需求探讨的。
extjs我觉得最大的问题的怎么使用接受参数,因为现在可视化的可编辑软件已经开发出了,数据转换以后,就可能代人使用。所有如果熟练使用了extjs交互的ajax函数,那么就掌握了extjs的开发。
我的QQ:1019990976, 注明exjts jsonstore ,欢迎一起探讨我上面提出的问题,如果你是刚刚接触extjs的那么请先入门的。
推荐使用的视频是:浪夕的视频,传智播客的extjs视频,看过这两个视频,那么保证你一定入门了,大概入门时间在一个星期。