用extJs进行表单提交返回json对象

这个例子是用extJs表单提交和struts2结合的例子。

首先，要进行编写js文件，js中文件建立一个button按钮，然后单击的时候响应下面的事件，此处就省略对于button的编写。响应的函数如下

 

 function addProgramItem() {
  firstWindow.show(); // 显示窗口
 }

 //-------------添加费率的 -------------------------
 var firstWindow = new Ext.Window({
    title : '<span class="commoncss">添加费率表单<span>', // 窗口标题
    layout : 'fit', // 设置窗口布局模式
    width : 400, // 窗口宽度
    height : 300, // 窗口高度
    closable : false, // 是否可关闭
    collapsible : true, // 是否可收缩
    maximizable : true, // 设置是否可以最大化
    border : false, // 边框线设置
    constrain : true, // 设置窗口是否可以溢出父容器
    animateTarget : Ext.getBody(),
    pageY : 20, // 页面定位Y坐标
    pageX : document.body.clientWidth / 2 - 600 / 2, // 页面定位X坐标
    items : [myForm], // 嵌入的表单面板
    buttons : [{
       text : '保    存',
      // iconCls : 'acceptIcon',
       handler : function() {
        submitTheForm();
       }
      }, {
       text : '重    置',
      // iconCls : 'tbar_synchronizeIcon',
       handler : function() {
        myForm.getForm().reset();
       }
      }, {
       text : '关    闭',
      // iconCls : 'deleteIcon',
       handler : function() {
        firstWindow.hide();
       }
      }]
   });

 

 var updateForm = new Ext.form.FormPanel({
    collapsible : false,
    border : true,
    labelWidth: 75, // label settings here cascade unless overridden
          frame:true,
          bodyStyle:'padding:5px 5px 0',
          width: 350,
          buttonAlign : 'center',
          defaults: {width: 230},
          defaultType: 'textfield',
    items: [
      {
       fieldLabel : '方案ID',
       name : 'program_id',
       readOnly : true,
       fieldClass : 'x-custom-field-disabled',
       xtype : 'textfield', // 设置为数字输入框类型
       maxLength:40
      },{
                   fieldLabel: '方案名称',
                   name: 'program_name',
                   allowBlank:false,
                   maxLength:40
               },{
                   fieldLabel: '计费模式',
                   name: 'compute_model',
                   allowBlank:false,
                   maxLength:2
               }, {
                xtype:'textarea',
                   fieldLabel: '方案描述',
                   name:'description',
                   maxLength:255
               },{
                fieldLabel:'方案状态',
                name:'tariff_program_state',
                allowBlank:false,
                maxLength:2,
                value:'00'
               },{
                fieldLabel:'操作人员',
                name:'operator',
                allowBlank:false,
                maxLength:20
               },{
                xtype:'datefield',
                fieldLabel :'操作时间',
             name:'op_time',
             allowBlank:false,
             format:'Y-m-d'
               }]
   });

 

 

 /**
  * 表单提交(表单自带Ajax提交)
  */
 function submitTheForm() {
  if (!myForm.getForm().isValid())
   return;
  myForm.form.doAction("submit",{
     url : 'program_save.action',
     waitTitle : '提示',
     method : 'POST',
     waitMsg : '正在处理数据,请稍候...',
     success : function(form, action) { // 回调函数有2个参数
      Ext.Msg.confirm('请确认', '新增成功,您要继续新增费率项目吗?', function(
          btn, text) {
         if (btn == 'yes') {
          myForm.getForm().reset();
         } else {
          firstWindow.hide();
          store.reload();
         }
        });
     },
     failure : function(form, action) {
      firstWindow.hide();
      Ext.MessageBox.alert('提示', '数据保存失败');
     }
    });
 }

 

 

当点击保存的时候就会访问program_save.action,这是struts.xml的配置，前提是struts的基本环境都配置好了，这里好像有struts的版本问题，因为我用上一个版本不知道为什么不好使。

 <package name="default" namespace="/" extends="json-default">

      <action name="program_save" class="com.action.ProgramAction" method="save">
             <result name="success" type="json"></result>
        </action>

 </package>

 

 

返回sucess就对应这表单提交后执行extjs中成功的回调函数

 public String save() throws IOException
 {
     programService.save(program);
     HttpServletResponse response = ServletActionContext.getResponse();
     PrintWriter out = response.getWriter();
     out.println("{success:true,msg:'tariff_program addd success'}");
     out.flush();
     out.close();
     return SUCCESS;
 }

评论

2 楼 zuimeitulip 2013-03-11  

直接封装成一个Program对象，里面的属性跟表单的数据  name: 'program_name',
name: 'compute_model',一一对象就行

1 楼 alei_628 2013-01-06  

programService.save(program);
表单提交过来的数据，是直接封装成program对象了，还是一个个获取的？封闭成对象怎么封装，是在请求到达action之前就把表单数据数据封装成Java对象