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

原创

mb644638dfa963e 2023-06-12 17:06:49 博主文章分类：经验总结 ©著作权

文章标签 EXT 音乐 Struts json Spring 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者mb644638dfa963e的原创作品，请联系作者获取转载授权，否则将追究法律责任

最近在学习Extjs,发现在Struts2中支持json数据，现在共享出来，大家一起学习 Struts.xml文件： [code]<?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.i18n.encoding" value="UTF-8"></constant>  <constant name="struts.multipart.parser" value="jakarta"></constant>  <constant name="struts.multipart.maxSize" value="2097152"></constant>  <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>  <constant name="struts.objectFactory" value="spring"></constant>  <constant name="struts.objectFactory.spring.autoWire" value="type"></constant>  <constant name="struts.custom.i18n.resources" value="massage"></constant>  <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] }); }); [/code]