Struts2和ExtJs之间的数据传递详解

最近在学习Extjs,发现在Struts2中支持json数据，现在共享出来，大家一起学习 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> <!-- 设置字符编码为UTF-8 --> <constant name="struts.i18n.encoding" value="UTF-8"></constant> <!-- 设置上传文件方式为jakarta --> <constant name="struts.multipart.parser" value="jakarta"></constant> <!-- 设置上传文件最大字节为：2097152 --> <constant name="struts.multipart.maxSize" value="2097152"></constant> <!-- 提交时的后缀名,如XXXX.action --> <constant name="struts.action.extension" value="action"></constant> <!-- 设置项目为开发模式 --> <constant name="struts.devMode" value="true"></constant> <!-- 资源文件若修改，则自动加载 --> <constant name="struts.i18n.reload" value="true"></constant> <!-- 主题 --> <constant name="struts.ui.theme" value="simple"></constant> <!-- 配置文件若修改，则自动加载 --> <constant name="struts.configuration.xml.reload" value="true"></constant> <!-- Spring 自动装配 --> <constant name="struts.objectFactory" value="spring"></constant> <!-- Spring配置文件若修改则 自动加载 --> <constant name="struts.objectFactory.spring.autoWire" value="type"></constant> <!-- 全局的国际化资源文件，在类型转换错误时，需要转换的信息内容在errorMassage.prop文件中定义 --> <constant name="struts.custom.i18n.resources" value="massage"></constant> <!-- Struts拦截相应的请求后分发给不同的模块来处理 --> <package name="strutspackage" extends="json-default">   <action name="yinyue" class="com.yxps.action.YinyueAction">   <result type="json"></result>   </action>   <action name="syslb" class="com.yxps.action.SysLbAction">   <result type="json"></result>   </action> </package> </struts> YinyueAction.java package com.yxps.action; import java.util.List; import com.googlecode.jsonplugin.annotations.JSON; import com.yxps.entity.Yinyue; import com.yxps.service.IYinyueService; /** * 音乐业务逻辑类 * @author Administrator * */ public class YinyueAction extends BaseCRUDAction { private Yinyue yinyue; public Yinyue getYinyue() {   return yinyue; } public void setYinyue(Yinyue yinyue) {   this.yinyue = yinyue; } public Integer getStart() {   return start; } public void setStart(Integer start) {   this.start = start; } public Integer getLimit() {   return limit; } public void setLimit(Integer limit) {   this.limit = limit; } public Integer getTotal() {   return total; } public void setTotal(Integer total) {   this.total = total; } // 当前第几页 private Integer start = 0; // 每页多少条记录 private Integer limit = 5; // 总记录数 private Integer total = 0; private List<Yinyue> list; @JSON(name = "list") public List<Yinyue> getList() {   return list; } public void setList(List<Yinyue> list) {   this.list = list; } public void setYinyueService(IYinyueService yinyueService) {   this.yinyueService = yinyueService; } private IYinyueService yinyueService; @Override public String doAdd() {   // TODO Auto-generated method stub     return null; } @Override public String doDelete() {   // TODO Auto-generated method stub   return null; } /**   * 分页查询音乐：   * 参数：start:第几页、   *  limit:每页显示数量   */ @Override public String doList() {   // TODO Auto-generated method stub   //设置总数   this.total=yinyueService.getAllYinyue().size();   //查询当前页的音乐   this.list=yinyueService.findYinyueByPage(this.start,this.limit);    return this.SUCCESS; } @Override public String doUdate() {   // TODO Auto-generated method stub   return null; } } 数据访问层在此就不写了。接下来看看js Ext.onReady(function() { Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side';//设置控件的错误信息的显示位置 /* 定义选择按钮 */ var sm = new Ext.grid.CheckboxSelectionModel(); // CheckBox选择列 var btn_test_yinyue=new Ext.Button({ text:'添加', dataIndex:'st', iconCls : 'icon-add', handler : function() {   window_add_yinyue.show(); } }); /* 定义列 */ var cm = new Ext.grid.ColumnModel([   new Ext.grid.RowNumberer(), // 行号列   sm, {   header : '编号',   dataIndex : 'id'   }, {   header : '音乐类别',   dataIndex : 'sysLb.lbmc'   }, //自定义renderer，即显示的样式，可以加html代码，来显示图片等。   {   header : '音乐名称',   dataIndex : 'yymc'   }, {   header : '试听',   dataIndex : 'yylj'   },{   header:'歌手',   dataIndex:'gsm'   },{   header:'专辑',   dataIndex:'zjm'   }   ]); /* 定义数据源 */ var ds = new Ext.data.Store({   autoLoad : false,   proxy : new Ext.data.HttpProxy({       url : 'yinyue.action?action=doList'     }),// 调用的动作   reader : new Ext.data.JsonReader({       // 记录总数参数名:名称需要跟action中对应       totalProperty : 'total',       // 查询出来的list集合:名称需要跟action中对应       root : 'list',       successProperty : 'success'     }, [{         name : 'id',         mapping : 'id',         type : 'int'       }, {         name : 'sysLb.lbmc',         mapping : 'sysLb.lbmc',         type : 'string'       }, {         name : 'yymc',         mapping : 'yymc',         type : 'string'       }, {         name : 'yylj',         mapping : 'yylj',         type : 'string'       },{name:'gsm',         mapping:'gsm',         type:'string'       },{name:'zjm',mapping:'zjm',type:'string'}             // 列的映射     ])   }); /*工具栏中的控件*/ //添加按钮 var btn_add_yinyue=new Ext.Button({ text:'添加', iconCls : 'icon-add', handler : function() {   window_add_yinyue.show(); } }); //查询按钮 var btn_search_yinyue = new Ext.Button({ text : '查询' //iconCls : 'icon-search' //handler : searchYinyue }); //编辑按钮 var btn_edit_yinyue=new Ext.Button({ text:'编辑' }); //查询文本框 var text_search_yinyue = new Ext.form.TextField({ name : 'textSearchBook', width : 200, emptyText : '多条件可用逗号或者空格隔开!' }); var btn_del_yinyue=new Ext.Button({ text:'删除' //iconCls:'icon-del' //handler:delYinyue }); var searchYinyue = function() { ds.baseParams.conditions = text_search_yinyue.getValue(); ds.load({params : {start : 0,limit : 20} }); } /* 定义DataGrid:显示数据 */ var grid = new Ext.grid.GridPanel({ ds : ds, // 数据源 sm : sm, // 选择按钮 cm : cm, // 列 autoWidth : true, autoHeight : true, // 工具栏按钮 tbar : [btn_add_yinyue, '-',btn_edit_yinyue, '-', btn_del_yinyue,'-',text_search_yinyue,'-',btn_search_yinyue], // 状态栏显示分页信息 bbar : new Ext.PagingToolbar({     store : ds,// 数据源     pageSize : 20, // 每页显示数量     displayInfo : true,     displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',     emptyMsg : "没有记录"   })   // 页脚显示分页 }); // el:指定html元素用于显示grid grid.render('grid3');// 渲染表格 ds.load({   // 加载数据   params : {     start : 0,     limit : 20   }   });// 备注：limit必须和bbar中的pageSize相同 /*音乐类别下拉框数据源*/ var ds_syslb_select = new Ext.data.Store({ url : 'syslb.action?action=doList', reader : new Ext.data.JsonReader({   root : 'list' }, [{name : 'id',type : 'int'},   {name : 'lbmc',type : 'string'} ]) }); /*添加音乐FormPanel*/ var yinyueForm=new Ext.FormPanel({ [url='yinyue.action?action=doAdd]url:'yinyue.action?action=doAdd'[/url], labelAlign : 'right', labelWidth : 70, bodyStyle : 'padding:5px', border : false, fileUpload : true, baseCls : 'x-plain', items : [{   layout : 'column',   border : false,   baseCls : 'x-plain',   items : [{   columnWidth : .5,   layout : 'form',   baseCls : 'x-plain',   border : false,   defaultType : 'textfield',   defaults : {anchor : '93%'},   items : [ {     xtype : 'combo',     fieldLabel : '所属分类',     blankText:'请选择所属分类！',     id : 'id',     hiddenName : 'yinyue.syslb.id',     valueField : 'id',     displayField : 'lbmc',     mode : 'remote',     store : ds_syslb_select,     selectOnFocus : true,     editable : false,     triggerAction : 'all',     loadingText : '加载中...'   this.ownerCt.ownerCt.ownerCt.form.findField('book.categoryName').setValue(record.data.categoryName); //    }     },{ fieldLabel : '音乐名称', name : 'yinyue.yymc',maxLength : 50,allowBlank : false,blankText:'音乐名不能为空！'},       { fieldLabel : '音乐路径', name : 'yinyue.yylj',maxLength : 250,allowBlank : false,blankText:'音乐路径不能为空！'},       { fieldLabel : '歌手',  name : 'yinyue.gsm',maxLength : 50,allowBlank : false,blankText:'歌手名不能为空！'}]       },{   columnWidth : .5,   layout : 'form',   border : false,   baseCls : 'x-plain',   defaultType : 'textfield',   defaults : {anchor : '93%'},   items : [{fieldLabel : '专辑', name : 'yinyue.zjm',maxLength : 50},     { fieldLabel : '发行时间',name : 'yinyue.fxsj',maxLength : 50},     {fieldLabel : '语种',name : 'yinyue.yz',  maxLength : 50},     {fieldLabel : '唱片公司',name : 'yinyue.cpgs', maxLength : 50}]   }] }], buttonAlign : 'center', minButtonWidth : 60, buttons : [{   text : '添加',   handler : function(btn) {   if(this.url != ""){   if (yinyueForm.getForm().isValid()) {     btn.disable();     var bnfield = yinyueForm.getForm().findField('yinyue.yymc');     yinyueForm.getForm().submit({     waitTitle : '请稍候',     waitMsg : '正在提交表单数据,请稍候...',     success : function(form, action) {       var store = grid.getStore();       //提交代码....       Ext.Msg.show({       title : '提示',       msg : '[ ' + bnfield.getValue() + ' ]  添加成功!!',       buttons : Ext.MessageBox.OK,       icon : Ext.Msg.INFO       });       bnfield.reset();       btn.enable();     },     failure : function(form, action) {       Ext.Msg.show({       title : '错误提示',       msg : action.result.contentTypeIsValid ? '操作失败' : '操作失败,文件类型不正确!',       buttons : Ext.Msg.OK,       fn : function() {bnfield.focus(true);btn.enable();},       icon : Ext.Msg.ERROR       });     }     });   }   }   } }, {   text : '重置',   handler : function() {this.ownerCt.form.reset();} }, {   text : '取消',   handler : function() {this.ownerCt.ownerCt.hide();} }] }) /*添加音乐窗口*/ var window_add_yinyue = new Ext.Window({ title : '添加音乐', width : 600, resizable : false, autoHeight : true, modal : true, closeAction : 'hide', listeners : {   'hide' : function() {   this.findById('book.bookName').ownerCt.ownerCt.ownerCt.form.reset();   } }, items : [yinyueForm] }); });