搭建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>