Ext.grid.EditorGridPanel使用方法

首先定义一个EditorGridPanel，

var maintainceOrderGrid = new Ext.grid.EditorGridPanel( {// 创建Grid表格组件  

                        applyTo : 'maintainorderinfo-grid-div',// 设置表格现实位置  

                        frame : true,// 渲染表格面板  

                        tbar : toolbar,// 设置顶端工具栏  

                        stripeRows : true,// 显示斑马线  

                        autoScroll : true,// 当数据查过表格宽度时，显示滚动条  

                        store : maintainceProjectStore,// 设置表格对应的数据集  

                        viewConfig : {// 自动充满表格  

                            autoFill : true  

                        },  

                        sm : sm,// 设置表格复选框  

                        cm : cm,// 设置表格的列  

                        bbar : new Ext.PagingToolbar( {  

                            pageSize : 25,  

                            store : maintainceProjectStore,  

                            displayInfo : true,  

                            displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',  

                            emptyMsg : '没有记录'  

                        })  

                    });  

接着定义grid中用到的sm和cm，

var sm = new Ext.grid.CheckboxSelectionModel();// 创建复选择模式对象  

        var cm = new Ext.grid.ColumnModel( [// 创建表格列模型  

                new Ext.grid.RowNumberer(), sm, {  

                    header : "维修价格",  

                    width : 60,  

                    dataIndex : 'price',  

                    sortable : true,  

                    editor : new Ext.form.NumberField( {  

                        editable : true,  

                        allowNegative : false,  

                        allowBlank : false,  

                        decimalPrecision : 2,  

                        minValue : 0  

                    //  ,  

                            //  maxValue : 1  

                            })  

                } ]);  

再定义一个保存维修价格的toolbar，用于调用保存维修价格的方法。

var toolbar = new Ext.Toolbar( [  {  

                text : '保存维修价格',  

                iconCls : 'add',  

                handler : setMaintaincePrice  

            } ]);  

保存维修价格的方法如下：

function setMaintaincePrice() {//设置维修价格  

var mr = maintainceProjectStore.getModifiedRecords();// 获取所有更新过的记录  

var recordCount = maintainceProjectStore.getCount();// 获取数据集中记录的数量  

if (mr.length == 0) {  

    Ext.MessageBox.alert('提示', '没有修改数据！');  

}   

else   

{  

    var msgTip = Ext.MessageBox.show( {  

    title : '提示',  

    width : 250,  

    msg : '正在提交更改请稍后......'  

});  

var recordModStr = "[";// 以josn方式保存数据  

for ( var i = 0; i < mr.length; i++) {  

    recordModStr += "{maintainceProjectId:"  

            + mr[i].data["maintainceProjectId"] + ",price:"  

            + mr[i].data["price"] + "}";  

    if (i < mr.length - 1)  

        recordModStr += ",";  

}  

recordModStr += "]";  

var requestConfig = {  

    //url : 'material.do?method=modifyMaterialQuantity×tamp=' + new Date(),  

    url : 'maintianceproject.do?method=setMaintaincePrice×tamp=' + new Date(),  

    jsonData : recordModStr,  

    params : {  

        mlist : recordModStr  

    },  

    callback : function(options, success, reponse) {  

        msgTip.hide();  

        if (success) {  

            Ext.Msg.alert('提示', '保存成功');  

            maintainceProjectStore.commitChanges();  

        } else {  

            Ext.Msg.alert('提示', '保存失败');  

        }  

    }  

Ext.Ajax.request(requestConfig);  

这里使用了

Ajax动态向后台发送请求的方法。这也是ExtJs前后台传递消息的有效方法之一。

下面列出后台读取josn的方法：

private ModelAndView setMaintaincePrice(HttpServletRequest request,  

            HttpServletResponse response) throws IOException {  

        String jsonstr = request.getParameter("mlist");  

        // test  

        System.out.println(jsonstr);  

        jsonstr = URLDecoder.decode(jsonstr, "utf-8");  

        JSONArray array = JSONArray.fromObject(jsonstr);  

        MaintianceprojectForm[] obj = new MaintianceprojectForm[array.size()];  

        boolean b = false;  

        for (int i = 0; i < array.size(); i++) {  

            JSONObject jsonObject = array.getJSONObject(i);  

            obj[i] = (MaintianceprojectForm) JSONObject.toBean(jsonObject,  

                    MaintianceprojectForm.class);  

            // test  

            System.out.println(obj[i].getMaintainceProjectId() + "*****"  

                    + obj[i].getPrice());  

            Maintianceproject record = new Maintianceproject();  

            record.setPrice(obj[i].getPrice());  

            b = this.getMaintianceprojectService().updateMaintaincePrice(  

                    obj[i].getMaintainceProjectId(), record);  

            if (b == false)  

                break;  

        if (b) {  

            response.getWriter().write("{success:true}");  

            response.getWriter().write("{success:false}");  

        return null;  

本文转自xwdreamer博客园博客，原文链接：http://www.cnblogs.com/xwdreamer/archive/2010/12/29/2297054.html，如需转载请自行联系原作者