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>