ext.grid.EditorGridPanel 向后台传送数据

来源：互联网发布：快乐家族知乎编辑：程序博客网时间：2024/04/28 01:24

在网上发现 ext 框架, 被它的强大深深吸引, 也准备在项目中用一下,在网上找了很多例子, 但都不全面, 这个例子希望能帮助初学者. ext 采用2.0.2

html 页面

<html>
<head>
    <title>测试数据</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../../share/ext2.0.2/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../share/ext2.0.2/adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../../share/ext2.0.2/adapter/yui/ext-yui-adapter.js"></script>
    <script type="text/javascript" src="../../share/ext2.0.2/ext-all-debug.js"></script>
</head>

<body class="body" oncontextmenu="self.event.returnValue=false" scroll="no">

      <table width="100%" border="0" valign=top>
        <tr>
          <td width="70%"> </td>
          <td><div id="bt_GetCard"></div></td>
          <td><div id="bt_Save"></div></td>
          <td><div id="bt_Cancel"></div></td>
        </tr>
      </table>
<table width="500" border="0" align="center">
<tr><td><div id="test_grid"></div></td></tr>
</table>
</body>

<script type="text/javascript">

Ext.grid.dummyData = [
    {Ids: 1, description: '', rate: 0},
    {Ids: 2, description: '', rate: 0},
    {Ids: 3, description: '', rate: 0},
    {Ids: 4, description: '', rate: 0},
    {Ids: 5, description: '', rate: 0}
];

Ext.onReady(function(){

Ext.QuickTips.init();

    var xg = Ext.grid;

    var reader = new Ext.data.JsonReader({
        fields: [
            {name: 'Ids', type: 'int'},
            {name: 'description', type: 'string'},
            {name: 'rate', type: 'float'}
        ]

    });

    var dataset = new Ext.data.Store({
        reader: reader,
        data: xg.dummyData
    });

    var grid = new xg.EditorGridPanel({

        ds: dataset,
        columns: [
            {
                header: '序号',
                width: 50,
                dataIndex: 'Ids'
            },{
                header: "描述",
                width: 300,
                dataIndex: 'description',
                hideable: false,
                editor: new Ext.form.TextField({
                   allowBlank: false
                })
            },{
                header: "收费金额",
                width: 100,
                //sortable: true,
                renderer: Ext.util.Format.usMoney,
                dataIndex: 'rate',
                editor: new Ext.form.NumberField({
                    allowBlank: false,
                    allowNegative: false,
                    style: 'text-align:left'
                })
            }
        ],

        frame: false,
        align: 'center',
        width: 500,
        height: 250,
        clicksToEdit: 1,
        collapsible: false,
        animCollapse: false,
        trackMouseOver: false,
        iconCls: 'icon-grid',
        renderTo: 'test_grid'
    });

    var bt_Save = new Ext.Button({
        text: ' 保  存 '
    });
    bt_Save.render('bt_Save');
    bt_Save.on('click', function(){
        var m = dataset.getModifiedRecords();
        if (m.length == 0){
            alert("没有数据");
            return false;
        }
        var sSend = "["
        for (var i = 0, len = m.length; i < len; i++){
            sSend = sSend + "{Memo:'" + m[i].data['description'] + "', Mey:'" + m[i].data['rate'] + "'}";
            if (i < len - 1)
                sSend = sSend + ","
        }
        sSend = sSend + "]";

        sSend = Ext.util.JSON.encode(sSend);

        Ext.Ajax.request({
            url: 'bxConsume_do.jsp',
            method: 'POST',
            success: function (result, request){
                alert('成功' + result.responseText);
            },
            failure: function (result, request){
                alert('失败' + result.responseText);
            },
            params: {data: sSend}
        });
    });
});
</script>
</html>

bxConsume_do.jsp 页面如下:

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="net.sf.json.*" %>
<%
    String S = "";
    int iCount = 0;
    JSONObject jsonObj;
    JSONArray jsonArr;

    S = request.getParameter("data");
    if (request.getParameter("data") == null){
        out.print("参数错误 1!");
        return;
    };
    S = java.net.URLDecoder.decode(S, "UTF-8");
    S = S.substring(1, S.length() - 1);

    jsonArr = JSONArray.fromObject(S);

    for (int i = 0; i < jsonArr.size(); i++){
        jsonObj = jsonArr.getJSONObject(i);
        JSONObject.toBean(jsonObj);

        if (jsonObj.getString("Memo").trim() != "" &&
            jsonObj.getDouble("Mey") > 0)
            iCount = iCount + 1;
        System.out.println( jsonObj.getString("Memo").trim() );
        System.out.println( jsonObj.getDouble("Mey") );
    }

%>

以上程序测试通过

后台用到的 JSON 库在我的资源中有