java extjs实例_搭建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配置内容如下

/p>

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

注意此处的：extends="json-default" ，

配置web.xml,内容如下：

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">

struts2

org.apache.struts2.dispatcher.FilterDispatcher

struts2

*.ph

struts2

*.jsp

/WEB-INF/struts-tags.tld

/WEB-INF/struts-tags.tld

index.jsp

新建一个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代码为：

My JSP 'login.jsp' starting page

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();

}

}]

});

});

其中index.jsp页面代码为：

index

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

})

})