extjs和struts、json的整合

使用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++ )
        {
            String pmgg = jsonArr.getJSONObject( i ).getString( "PMGG" );
            String unit = jsonArr.getJSONObject( i ).getString( "UNIT" );
            String amount = jsonArr.getJSONObject( i ).getString( "AMOUNT" );
            String price = jsonArr.getJSONObject( i ).getString( "PRICE" );
            //String money = jsonArr.getJSONObject( i ).getString( "MONEY" );
            String availDate = jsonArr.getJSONObject( i ).getString( "availDate" );

            String sql = "insert into sorderdetail ( sorderid, itemno, goodsid, unitid, quantity, unitprice, validdate  ) select "
                + sorderid
                + ", " + ( i + 1 ) + ", '"
                + pmgg
                + "', ( select unitid from goodsunit where goodsid = " //取单位序号
                + pmgg
                + " and unitname = '" + unit + "' )," + amount + ", " + price + ", '" + availDate + "'";

            xdbs.executeDAC( sql );
        }
        }
        catch ( Exception e )
        {
        e.printStackTrace();
        //加处理失败标记
        this.outputBuffer.get( CoreConsts.TOTAL_COUNT, 0 ).setValueWithString( "0" );
        }

    }

上面的java代码片段依此处理json串的多条记录，构造sql语句，将记录添加到数据库中，以json的方式处理成批提交的记录，应该是最方便的方法。

评论

1 楼 qbq 2009-08-18  

博主有没有源码分享下
我们现在也开始学习用这个东西了