Extjs struts2 json
这是我的项目的整体结构。
首先的那些环境搭配自己上网查下就OK了，本文主要是运用Extjs和struts2交互，用到json插件,搭建JSON的环境我讲下：
先去下载JSON插件：
http://code.google.com/p/jsonplugin/downloads/list下载jar包，然后copy到 lib 文件夹里
struts.xml里德代码：
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <include file="struts-default.xml"/> <package name="json" extends="json-default"> <action name="extjs" class="book.action.ExtjsAction"> <result type="json"/> </action> <action name="extjsXml" class="book.action.ExtjsAction"> <result type="freemarker"> <param name="location">template/gridXml.ftl</param> <param name="contentType">application/xml</param> </result> </action> </package> </struts>
ExtjsAction的代码：
package book.action; import java.util.ArrayList; import java.util.List; import book.bean.Person; import com.opensymphony.xwork2.ActionSupport; public class ExtjsAction extends ActionSupport{ private long results; private List items; public String execute(){ this.results=3; Person p1=new Person("张三",29,"男","1979-09-13"); Person p2=new Person("李四",28,"男","1937-09-25"); Person p3=new Person("王五",27,"女","1989-09-24"); this.items=new ArrayList(); this.items.add(p1); this.items.add(p2); this.items.add(p3); return SUCCESS; } public long getResults() { return results; } public void setResults(long results) { this.results = results; } public List getItems() { return items; } public void setItems(List items) { this.items = items; } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name>struts2</display-name> <filter> <!-- 定义核心Filter的名称 --> <filter-name>struts2</filter-name> <!--定义核心Filter的实现类 --> <filter-class> org.apache.struts2.dispatcher.FilterDispatcher </filter-class> </filter> <filter-mapping> <!--核心Filter的名称 --> <filter-name>struts2</filter-name> <!--使用该核心Filter来接受所有的Web请求 --> <url-pattern>/*</url-pattern> </filter-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> <link rel="stylesheet" type="text/css" href="ext-3.3.0/resources/css/ext-all.css" mce_href="ext-3.3.0/resources/css/ext-all.css"> <mce:script type="text/javascript" src="ext-3.3.0/adapter/ext/ext-base.js" mce_src="ext-3.3.0/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="ext-3.3.0/ext-all.js" mce_src="ext-3.3.0/ext-all.js"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function(){ Ext.BLANK_IMAGE_URL='ext-3.3.0/resources/images/default/s.gif'; //定义数据集对象 /* var store = new Ext.data.Store({//配置分组数据集 autoLoad :true, reader: new Ext.data.XmlReader({ totalRecords : "results", record : "Person", fields : [ {name: 'name'}, {name: 'age'}, {name: 'sex'}, {name: 'birthday'} ] }), proxy : new Ext.data.HttpProxy({ url : 'extjsXml.action' }) }) */ //定义数据集对象 var store = new Ext.data.Store({//配置分组数据集 autoLoad :true, reader: new Ext.data.JsonReader({ totalRecords : "results", root : "items", fields : [ {name: 'name'}, {name: 'age'}, {name: 'sex'}, {name: 'birthday'} ] }), proxy : new Ext.data.HttpProxy({ url : 'extjs.action' }) }) //创建Grid表格组件 var grid = new Ext.grid.GridPanel({ title : '人员列表', applyTo : 'grid-div', width:450, height:200, frame:true, store: store, columns: [//配置表格列 new Ext.grid.RowNumberer(),//表格行号组件 {header: "姓名", width: 80, dataIndex: 'name', sortable: true}, {header: "年龄", width: 80, dataIndex: 'age', sortable: true}, {header: "性别", width: 80, dataIndex: 'sex', sortable: true}, {header: "生日", width: 80, dataIndex: 'birthday', sortable: true} ] }) }); // --></mce:script> </head> <body style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;"> <div id="grid-div"></div> </body> </html>