ExtJs 与 Structs2交互的几大总结

package com.ysu.core.action;
import java.util.ArrayList;
import java.util.List;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
/**
 *Ext AJAX交换类 
 * 
 **/
@SuppressWarnings("serial")
public class ExtAjaxAction extends BaseAction {
	
	public void loadGridPanel(){
		List<PersonEntity> list = new ArrayList<PersonEntity>();
		PersonEntity  pe1 = new PersonEntity(1,"张三","男");
		PersonEntity  pe2 = new PersonEntity(2,"李四","女");
		PersonEntity  pe3 = new PersonEntity(3,"王五","无");
		list.add(pe1);
		list.add(pe2);
		list.add(pe3);
		String str = JSONArray.toJSONString(list);
		outJsonString(str);
	}
	/**
	 *添加表单 
	 **/
	public void submitForm(){
		String name = getRequest().getParameter("name");
		outJsonString("{success:true,name:'"+name+"'}");
	}
	/**
	 *加载表单 
	 **/
	public void loadForm(){
		
		PersonEntity  pe3 = new PersonEntity(3,"王五","无");
		String str = JSONObject.toJSONString(pe3);
		outJsonString("{success:true,data:"+str+"}");
	}
	
	/**
	 *普通一般的Ajax 服务器交互
	 **/
	public void normalAjax(){
		
		String str = getRequest().getParameter("name");
		outJsonString("{success:true,data:'"+str+"'}");
	}
	
	/**
	 *加载Panel的数据
	 **/
	public void loadPanel(){
		
		
		outJsonString("<h2>纯Html的数据<h2>");
	}
}

两个 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>
	<package name="coreaction" extends="struts-default" namespace="/">
		<action name="index" class="com.ysu.core.action.BaseAction" method="goToIndex">
			<result name="result">/index.jsp</result>
		</action>
	</package>
	<include file="struts-extjs.xml" />
</struts>

<?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>
	<package name="extjs" extends="coreaction" namespace="/">
		<!-- 加载loadgridpanel的数据 -->
		<action name="loadgridpanel" class="com.ysu.core.action.ExtAjaxAction" method="loadGridPanel"/>
		<!-- 提交Form的数据 -->
		<action name="submitform" class="com.ysu.core.action.ExtAjaxAction" method="submitForm"/>
		<!-- 加载form的数据 -->
		<action name="loadform" class="com.ysu.core.action.ExtAjaxAction" method="loadForm"/>
		<!-- 用纯Ajax交换数据 -->
		<action name="normalajax" class="com.ysu.core.action.ExtAjaxAction" method="normalAjax"/>
		<!-- 用存PanelLoad数据信息 -->
		<action name="loadpanel" class="com.ysu.core.action.ExtAjaxAction" method="loadPanel"/>
	
	
	</package>
</struts>

JS 脚本

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
	var grid = new Ext.grid.GridPanel({
		renderTo:'gridpanel',
		store:new Ext.data.JsonStore({
			url:'loadgridpanel.action',
			autoLoad:true,
			fields:['id','name','sex']
		}),
		cm:new Ext.grid.ColumnModel(
			[
				{dataIndex:'id',header:'id',sort:true},
				{dataIndex:'name',header:'name',sort:true},
				{dataIndex:'sex',header:'sex',sort:true}
				
			]),
		width:400,
		height:150
	});
	
	/**
	 *表单交互 
	 * 
	 **/
	var form = new Ext.FormPanel({
		title:'FormPanel',
		renderTo:'formpanel',
		tbar:[{text:'提交',handler:function(){
			form.getForm().submit(
				{
					method:'POST',
					url:'submitform.action',
					success:function(form,action){
						alert(action.result.name);
						alert('提交成功');
					},
					failure:function(form,action){
						alert('提交失败');
					}
				}
			);
			
		}},'-',
			{
				text:'加载',
				handler:function(){
					form.load({
		                waitTitle: '标题数据信息',
		                waitMsg: '正在加载',
		                params:{vid:'1'},
						url:'loadform.action',
		                success: function(action, form){
		                	alert('OK');
		                },
		                failure: function(action, form){
		                    alert('失败');
		                }
		            });
				}
			}
		],
		width:400,
		height:150,
		items:[
			{
				xtype:'textfield',name:'name',fieldLabel:'姓名'
			},
			{
				xtype:'textfield',name:'id',fieldLabel:'编号'
			},
			{
				xtype:'textfield',name:'sex',fieldLabel:'性别'
			}]
		
	});
	
	/**
	 *按钮存Ajax交换适用于任何的
	 *提交或与服务器交互 
	 * 
	 **/
	
	var btn = new Ext.Button({
		renderTo:'button',
		text:'AJAX 的提交测试',
		handler:function(){
			Ext.Ajax.request({
				url:'normalajax.action',
				params:{name:'张三'},
				method:'POST',
				success:function(response,option){
					alert("从服务器相应回来的数据是 "+response.responseText);
					var obj = Ext.util.JSON.decode(response.responseText);
					alert("请求的数据是 ----"+obj.data);
					var _o = Ext.util.JSON.decode(response.responseText);
					var _j = Ext.decode(response.responseText);
					
	
				},
				failure:function(response,option){
					alert(response.responseText);
				}
			});
		}
	});
	/**
	 *Panel 数据信息 
	 **/
	
	var panel = new Ext.Panel({
		renderTo:'panel',
		autoLoad:{url:'loadpanel.action'},
		width:300,
		height:50
		
	})
	
});

jsp 文件内容信息

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>便利好的标签库</title>
  	
  	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="ext/ext-all.js"></script>
	<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <script type="text/javascript" src="ajax/ajax.js"></script>
  </head>
  <body>
    <h4 align="center">Grid 主要是利用Store 与JAVA进行 Ajax的交互</h4>
	<div align="center" id="gridpanel"></div>
	<div align="center">Form有自己的load 方法 与 submit 方法</div>
	<div id="formpanel" align="center"></div>
	<br/><br/>
	<div align="center">普通的按钮Ajax的数据按钮</div>
	<br/><br/>
	<div align="center" id="button"></div>
	<br/><br/>
	<div  align="center">利用Panel的load 功能进行ajax数据加载 Panel 里面的内容是从服务器上返回的数据</div>
	<div  align="center" id="panel"></div>
	<hr/>1<hr/>
  </body>
</html>