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，如需轉載請自行聯系原作者