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