关于ext和struts的交互

使用extjs配合struts的MVC架构是目前流行的做法，两者的整合相当简单，只需扩展Action，直接向HttpServletResponse里写xml和json格式的内容，不再需要forward到struts指定的页面。

// 取查询结果xml和总记录个数
    String xml = resultBuffer.getStringValue( CoreConsts.LIST_DATA_XML, 0 );
    String records = resultBuffer.getStringValue( CoreConsts.TOTAL_COUNT, 0 );
    // 替换xml中的记录个数
    xml = replaceRecords( xml, records );
    
    if ( records.equals( "0" ) )
        xml = "<response success='false'>" + xml + "</response>";
    else
        xml = "<response success='true'>" + xml + "</response>";
    
    response.setContentType("application/xml;charset=UTF-8");
    PrintWriter out = null;
    try
    ...{
        out = response.getWriter();
    }
    catch ( IOException e )
    ...{
        e.printStackTrace();
    }
    
    out.write( xml );

 上面的java代码片端实现了一个通用的Action扩展，姑且称之为EXTJSAction，向HttpServletResponse写入xml内容，包括（但不限于）处理结果的xml格式内容和总的记录个数（用于翻页时显示总记录个数），以及成功或失败的标记，就这么简单！

接下来要求extjs能够识别并处理EXTJSAction返回的xml内容，通常在一个Ext.form.Form里实现，请看下面的代码片段：

var fs = new Ext.form.Form(...{
        labelAlign: 'right',
        labelWidth: 75,
        buttonAlign: 'left',
        // reusable eror reader class defined at the end of this file
        errorReader: new Ext.form.XmlErrorReader()
    });

fs.fieldset(
        ...{legend:'基本信息'} );
    
    dsCust = new Ext.data.Store(...{
                proxy: new Ext.data.HttpProxy(...{url: '../getCustList.do'}),
                reader: new Ext.data.XmlReader(...{
               // records will have a "customer" tag
               //root: 'response',
               record: 'table',
               totalRecords: 'records'
                   },[ 'CUSTID', 'CUSTSHORTNAME']) 
        });
        
    comboboxCust = new Ext.form.ComboBox(...{
            fieldLabel:'客户',
            typeAhead: true,
            triggerAction: 'all',
            store: dsCust,
            displayField:'CUSTSHORTNAME',
            valueField: 'CUSTID',
            width:200,
            forceSelection:true,
            name:'clientid',
            hiddenName:'clientid',
            emptyText:'选择一个客户...',
            allowBlank:false,
            blankText:'请选择一个客户',
            pageSize: 20
        });

    fs.column(...{width:300},
        comboboxCust
      );

    fs.addButton('保存并新增', function()...{
        //组装grid的json
        /**//*
        var jsonData = "";
        
        for( i=0; i < ds.getCount(); i ++ )
        {
            var rec = ds.getAt( i );
            if ( rec.data.newRecord || rec.dirty ) {
                jsonData += Ext.util.JSON.encode( rec.data ) + ",";
            }
        }
        
        jsonData = jsonData.substring( 0, jsonData.length - 1 );
        //alert( jsonData )
        //console.info(jsonData);
        */
        
        var m = ds.modified.slice( 0 );
        var jsonData = "[";
        for ( var i = 0, len = m.length; i < len; i++ ) ...{    
            //alert(m[i].data["user_name"]);        
            var ss = Ext.util.JSON.encode( m[i].data );
            //alert(ss);
            if ( i==0 )
                   jsonData = jsonData + ss;
               else
                jsonData = jsonData + "," + ss;
        }
        jsonData = jsonData + "]";
        //alert(jsonData);

        fs.submit( ...{
            url: "../addSaleOrder.do",
            params:...{json:jsonData},
            waitMsg:'正在处理，请稍候...',
            success:function(form, action ) 
            ...{ 
                Ext.MessageBox.alert("销售订单!", "保存销售订单成功！");
                fs.reset();
                ds.modified = [];//将修改过的记录置为空，如果不清空，则修改过的数据会一直保留
                ds.removeAll(); //从grid中移去
            },
            failure:function( form, action )
            ...{
                Ext.MessageBox.alert("销售订单!", "保存销售订单失败！");
            }
        });
    } );

// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function()...{
    Ext.form.XmlErrorReader.superclass.constructor.call(this, ...{
            record : 'field',
            success: '@success'
        }, [
            'id', 'msg'
        ]
    );
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);

首先定义了一个Form，这个Form有一个XmlErrorReader，能够读取EXTJSAaction返回的xml格式，判断EXTJSAaction处理是成功还是失败。Form被提交到../addSalesOrder.do，这是我们熟悉的struts格式，将调用到EXTJSAction，此即是extjs和struts交互的关键！

我们还注意到上面的js代码中，Form包含一个ComBoBox，用于从下拉列表中选择客户，这个ComBoBox是分页的（pageSize:20，会自动在ComBoBox展开后下放加翻页工具栏）。客户列表的内容同样来之于EXTJSAction,即../getCustList.do，这就是一个通用的EXTJSAction的好处，随处可使用！

请仔细体会上面的代码，extjs和struts的整合是如此的简单！

另外，Form在提交时，将Grid的内容组装成一个json格式的字符串，是为了方便成批提交Grid中的记录，那么在服务器端如何处理这个json串中的多条记录呢？需要用到json的java类库（http://www.json.org/java/），代码如下：

//保存订单明细
    String json = this.getVariableSpace().getStringValue( "json", 0 );
    json = RequestUtil.iso2utf( json );

    if ( json != null || json.trim().length() > 0 )
    ...{
        JSONArray jsonArr = null;
        try
        ...{
        XmlDBService xdbs = XmlDBServiceManager.getXmlDBService( Const.XMLDBSERVICE );

        jsonArr = new JSONArray( json );
        for ( int i = 0; i < jsonArr.length(); i++ )
        ...

评论

8 楼 horizon7125 2008-02-15  

非常需要 ，希望楼主能发一份完整的demo，谢谢！
[e-mail]

7 楼 tod 2008-01-30  

楼主：是不是见都有份啊，现在都快被逼疯了，有的话我也要：[e-mail]

谢了！！！！！！！

6 楼 weboffice 2008-01-27  

我也需要呀,楼主也发给我一份吧,十分感谢,我的[e-mail]

5 楼 wuyunjun 2007-12-19  

楼主你太牛了， 这几天我们老师也再给我弄这个问题，你能把你的代码给我发一份吗？我的邮箱是[e-mail]。非常感谢！！！

4 楼 hudixin1987 2007-12-18  

楼主 你好  我在学习ext 能法个源码给我 借鉴下么 谢谢  非常感谢   [e-mail]

3 楼 j357777842 2007-11-14  

楼主你好!近日我正在研究ext与struts的结合,今天搞了一天,没有一点效果,请求楼主能发一个实例,我的Email:[e-mail],MSN:[e-mail],qq:4953295,我是一个SA,希望能和你好好勾通和交流!期待你能回复!谢谢!

2 楼 j357777842 2007-11-14  

楼主你好,能否发一个完整的返回json的实例代码?

1 楼 JaNer 2007-10-26  

正在研究EXTJS和Struts整合的问题,看到此帖很是兴奋。看完后有个大体的理解了，下一步动手肯定还会得来求教楼主.!