Struts与Extjs的整合
1、引入以下Jar包
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
commons-lang3-3.1.jar
dom4j-1.6.1.jar
freemarker-2.3.19.jar
javassist-3.11.0.GA.jar
ognl-3.0.6.jar
struts2-core-2.3.12.jar
struts2-json-plugin-2.3.12.jar
xwork-core-2.3.12.jar
2、建立Person类
Java代码 收藏代码
package com.hpu.pojo;
public class Person {
private int id;
private String name;
private String number;
public Person(int id , String name , String number) {
this.id = id;
this.name = name;
this.number = number;
}
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 getNumber() {
return number;
}
public void setNumber(String number) {
this.number = number;
}
}
3、配置struts.xml与web.xml
Xml代码 收藏代码
<?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>
<package name="struts2" namespace="/" extends="json-default">
<action name="getPerson" class="com.hpu.action.PersonAction">
<result type="json"/>
</action>
<action name="show" class="com.hpu.action.PersonAction" method="in" >
<result>/in.jsp</result>
</action>
</package>
</struts>
Xml代码 收藏代码
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
4、编写处理请求的PersonAction
Java代码 收藏代码
package com.hpu.action;
import java.util.ArrayList;
import java.util.List;
import com.hpu.pojo.Person;
import com.opensymphony.xwork2.ActionSupport;
public class PersonAction extends ActionSupport {
private List<Person> persons;
public List<Person> getPersons() {
return persons;
}
public void setPersons(List<Person> persons) {
this.persons = persons;
}
@Override
public String execute() throws Exception {
Person person1 = new Person(1, "zhangsan", "15426897458");
Person person2 = new Person(2, "lisi", "15236989636");
persons = new ArrayList<Person>();
persons.add(person1);
persons.add(person2);
return SUCCESS;
}
}
5、写请求页面
Html代码 收藏代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test.html</title>
<link rel="stylesheet" type="text/css" href="../ext_js3/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../ext_js3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext_js3/ext-all-debug.js"></script>
<script type="text/javascript" src="Test.js"></script>
</head>
<body>
<div id="show"></div>
</body>
</html>
6、编写js文件
Js代码 收藏代码
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = "../ext_js3/resources/images/default/s.gif";
var Person = new Ext.data.Record.create([
{name:"id",mapping:"id"},
{name:"name",mapping:"name"},
{name:"number",mapping:"number"}
]);
// Json存储器
var store = new Ext.data.Store({
url:"getPerson.action",
reader:new Ext.data.JsonReader(
{root:"persons"},
Person
)
});
store.load();
// 使用ColumnModel
var columnModel = new Ext.grid.ColumnModel({
columns:[
{header:"id",dataIndex:"id",sortable:true},
{header:"name",dataIndex:"name",sortable:true},
{header:"number",dataIndex:"number",sortable:true}
]
});
new Ext.grid.GridPanel({
id:"myPanel",
title:"gridPanel",
width:400,
height:300,
frame:true,
applyTo:"show",
store:store,
// 设置可排序
cm:columnModel,
autoExpandColumn:2
});
})
7、效果
