ExtJs 3.0 + Struts 2.1 + JsonPlugin 0.33
我的学习成果和大家分享一下。我的学习资料来源于网络，感谢前辈们。
我作了一些改动，没有连接数据库，节省时间。因为我们的目的是让代码跑通。
欢迎大家提出意见
struts2的json plugin的位置在：http://code.google.com/p/jsonplugin/
下载json plugin的jar包，放到/WEB-INF/lib/目录下就可以了
1. Model PO JavaBean
2. Service 用于造数据的
3. Struts 2 的 action
4. Struts的配置文件，放到src下
5. 前台页面
6. Ext 的 js 文件
[img][/img]
我作了一些改动，没有连接数据库，节省时间。因为我们的目的是让代码跑通。
欢迎大家提出意见
struts2的json plugin的位置在：http://code.google.com/p/jsonplugin/
下载json plugin的jar包，放到/WEB-INF/lib/目录下就可以了
1. Model PO JavaBean
public class Person {
private Long id;
private String name;
private String sex;
private String descn;
public Long getId() {
return id;
}
//......
}
2. Service 用于造数据的
public class PersonService {
public static List getPage() {
List list = new ArrayList();
for (int i = start + 1; i <= start + limit; i++) {
Person p = new Person();
p.setId(new Long(i));
p.setName("Zhangsan");
p.setSex("F");
p.setDescn("I am NO." + i );
list.add(p);
}
return list;
}
}
3. Struts 2 的 action
public class PersonPageAction extends ActionSupport{
private int limit = 10;
private int start = 0;
private int total = 0;
private List persons = new ArrayList();
private boolean success = true;
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public List getPersons() {
return persons;
}
public void setPersons(List persons) {
this.persons = persons;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
@Override
public String execute() throws Exception {
total = 100;
persons = PersonService.getPage(start, limit);
return SUCCESS;
}
}
4. Struts的配置文件，放到src下
<?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.i18n.encoding" value="UTF-8"/>
<package name="person" extends="json-default">
<action name="list" class="com.extjs.action.PersonPageAction">
<result type="json"/>
</action>
</package>
</struts>
5. 前台页面
<html>
<head>
<title>Struts Test</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="struts.js"></script>
</head>
<body>
<div id="struts"></div>
</body>
6. Ext 的 js 文件
Ext.onReady(function() {
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel(); // CheckBox
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //
sm,
{header: "编号", dataIndex: 'id'},
{header: "性别", dataIndex: 'sex'},
{header: "名称", dataIndex: 'name'},
{header: "描述", dataIndex: 'descn'}
]);
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '/list.action'}),
reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'persons',
successProperty: 'success'
}, [
{name: 'id', mapping: 'id', type: 'int'},
{name: 'sex', mapping: 'sex', type: 'string'},
{name: 'name', mapping: 'name', type: 'string'},
{name: 'descn', mapping: 'descn', type: 'string'}
])
});
var grid = new Ext.grid.GridPanel({
el: 'struts',
ds: ds,
sm: sm,
cm: cm,
width: 700,
height: 280,
bbar: new Ext.PagingToolbar({
pageSize:10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录, 共 {2} 条',
emptyMsg: '没有记录'
})
});
grid.render();
ds.load({params: {start: 0, limit:10}});
});
[img][/img]