搭建EXTJS和STRUTS2框架(ext和struts2简单实例)

新建一个工程struts2工程teaweb(因为现在所做的项目是一个关于茶叶，茶文化的)，导入jar包(基本的几个jar包：commons-logging-1.0.4.jar，freemarker- 2.3.8.jar，ognl-2.6.11.jar，struts2-core-2.0.10.jar，xwork-2.0.4.jar)，配置 struts.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>
constant name="struts.action.extension" value="ph" />
constant name="struts.multipart.maxSize" value="1000000000"/>
package name="teaweb" extends="json-default" namespace="/">
action name="test" class="com.teaweb.action.TestAction">

result type="json">/result>
/action>
/package>
/struts>

 注意此处的：extends="json-default" ，result type="json">/result>

配置web.xml,内容如下：

?xml version="1.0" encoding="UTF-8"?>
web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

filter>
filter-name>struts2/filter-name>
filter-class>org.apache.struts2.dispatcher.FilterDispatcher/filter-class>
/filter>
filter-mapping>
filter-name>struts2/filter-name>
url-pattern>*.ph/url-pattern>
/filter-mapping>

filter-mapping>
filter-name>struts2/filter-name>
url-pattern>*.jsp/url-pattern>
/filter-mapping>
jsp-config>
taglib>
taglib-uri>/WEB-INF/struts-tags.tld/taglib-uri>
taglib-location>/WEB-INF/struts-tags.tld/taglib-location>
/taglib>
/jsp-config>
welcome-file-list>
welcome-file>index.jsp/welcome-file>
/welcome-file-list>
/web-app>

 新建一个java类为TestAction，java代码为：

package com.teaweb.action;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.List;
import com.teaweb.bean.TestBean;
import com.teaweb.dao.TestDAO;

public class TestAction extends PublicAction {
private TestBean testBean;
private long results;
private TestDAO testDAO=new TestDAO();
private List list;
public String select() {
// TODO Auto-generated method stub
response.setCharacterEncoding("gb2312");
list=testDAO.select();
results=list.size();
return SUCCESS;
}
public String login() {
// TODO Auto-generated method stub
try {
request.setCharacterEncoding("utf-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
response.setCharacterEncoding("gb2312");
TestBean result=testDAO.selectbyname(testBean);
if(result!=null){
outString("{success:true,msg:'"+result.getName()+"登录成功'}");
}else{
outString("{failure:true,msg:'登录失败'}");
}
return null;
}

public TestBean getTestBean() {
return testBean;
}

public void setTestBean(TestBean testBean) {
this.testBean = testBean;
}

public List getList() {
return list;
}

public void setList(List list) {
this.list = list;
}

public long getResults() {
return results;
}

public void setResults(long results) {
this.results = results;
}

}

 其中TestBean 是一个实体类，还有一个连接数据库查询的方法，只要能查出为List结果就可以了

我这里做了一个登陆和查询所有TEST表里的信息两个方法

其中login.jsp代码为：

%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
title>My JSP 'login.jsp' starting page/title>
meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
meta http-equiv="description" content="This is my page">
link rel="stylesheet" type="text/css" href="/ext2/resources/css/ext-all.css" />
script type="text/javascript" src="/ext2/adapter/ext/ext-base.js">/script>
script type="text/javascript" src="/ext2/ext-all.js">/script>
/head>
body>
script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var form1=new Ext.FormPanel({
renderTo:"panel1",
width:500,
height:300,
frame:true,
title:"ajax提交",
collapsible:true,
minButtonWidth:60,
labelAlign:"right",
defaultType:"textfield",
url:"test!login.ph",
items:[{
fieldLabel:"用户名",
id:"txtName",
name:'testBean.name',
allowBlank:false,
blankText:"用户名不能为空!"
},{
fieldLabel:"密码",
allowBlank:false,
blankText:"密码不能为空!",
name:'testBean.password',
inputType:'password'
},{
fieldLabel:"备注"
}],
buttons:[{
text:"提交",
handler:function(){
if(form1.getForm().isValid()) {
form1.getForm().submit({
success:function(from,action) {
Ext.Msg.alert("返回提示",action.result.msg);
window.location = 'index.jsp';
},
failure:function(form,action) {
Ext.Msg.alert("返回提示",action.result.msg);
}
});
}
}
},{
text:"重置",
handler:function() {
form1.getForm().reset();
}
}]
});

});
/script>
div id="panel1"> /div>
/body>
/html>

 其中index.jsp页面代码为：

%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
title>index/title>
meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
meta http-equiv="description" content="This is my page">
link rel="stylesheet" type="text/css" href="/ext2/resources/css/ext-all.css" />
script type="text/javascript" src="/ext2/adapter/ext/ext-base.js">/script>
script type="text/javascript" src="/ext2/ext-all.js">/script>
/head>
body>
script type="text/javascript">
Ext.onReady(function(){
var store=new Ext.data.JsonStore({
url:"test!select.ph",
totalProperty: "results",
root: "list",
fields:[{name:'id',mapping:'id'}, {name:'name',mapping:'name'},{name:'password',mapping:'password'}]
});
store.load();
var gird=new Ext.grid.GridPanel({
renderTo:"hello",
title:"欢迎登录",
height:150,
width:300,
columns:[
{header:"编号",dateindex:"id"},
{header:"账号",dateindex:"name"},
{header:"密码",dateindex:"password"}
],
store:store,
autoExpandColumn:2
})
})
/script>
div id="hello"> /div>
/body>
/html>