Ext.grid.EditorGridPanel使用方法

首先定义一个EditorGridPanel，

[c-sharp]  view plain copy print ?

1. var maintainceOrderGrid = new Ext.grid.EditorGridPanel( {// 创建Grid表格组件  
2.                         applyTo : 'maintainorderinfo-grid-div',// 设置表格现实位置  
3.                         frame : true,// 渲染表格面板  
4.                         tbar : toolbar,// 设置顶端工具栏  
5.                         stripeRows : true,// 显示斑马线  
6.                         autoScroll : true,// 当数据查过表格宽度时，显示滚动条  
7.                         store : maintainceProjectStore,// 设置表格对应的数据集  
8.                         viewConfig : {// 自动充满表格  
9.                             autoFill : true  
10.                         },  
11.                         sm : sm,// 设置表格复选框  
12.                         cm : cm,// 设置表格的列  
13.                         bbar : new Ext.PagingToolbar( {  
14.                             pageSize : 25,  
15.                             store : maintainceProjectStore,  
16.                             displayInfo : true,  
17.                             displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',  
18.                             emptyMsg : '没有记录'  
19.                         })  
20.                     });  

 

 

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

[c-sharp]  view plain copy print ?

1. var sm = new Ext.grid.CheckboxSelectionModel();// 创建复选择模式对象  
2.         var cm = new Ext.grid.ColumnModel( [// 创建表格列模型  
3.                 new Ext.grid.RowNumberer(), sm, {  
4.                     header : "维修价格",  
5.                     width : 60,  
6.                     dataIndex : 'price',  
7.                     sortable : true,  
8.                     editor : new Ext.form.NumberField( {  
9.                         editable : true,  
10.                         allowNegative : false,  
11.                         allowBlank : false,  
12.                         decimalPrecision : 2,  
13.                         minValue : 0  
14.                     //  ,  
15.                             //  maxValue : 1  
16.                             })  
17.                 } ]);  

 

 

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

[c-sharp]  view plain copy print ?

1. var toolbar = new Ext.Toolbar( [  {  
2.                 text : '保存维修价格',  
3.                 iconCls : 'add',  
4.                 handler : setMaintaincePrice  
5.             } ]);  

 

 

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

[c-sharp]  view plain copy print ?

1. function setMaintaincePrice() {//设置维修价格  
2. var mr = maintainceProjectStore.getModifiedRecords();// 获取所有更新过的记录  
3. var recordCount = maintainceProjectStore.getCount();// 获取数据集中记录的数量  
4.   
5. if (mr.length == 0) {  
6.     Ext.MessageBox.alert('提示', '没有修改数据！');  
7. }   
8. else   
9. {  
10.     var msgTip = Ext.MessageBox.show( {  
11.     title : '提示',  
12.     width : 250,  
13.     msg : '正在提交更改请稍后......'  
14. });  
15. var recordModStr = "[";// 以josn方式保存数据  
16. for ( var i = 0; i < mr.length; i++) {  
17.     recordModStr += "{maintainceProjectId:"  
18.             + mr[i].data["maintainceProjectId"] + ",price:"  
19.             + mr[i].data["price"] + "}";  
20.     if (i < mr.length - 1)  
21.         recordModStr += ",";  
22. }  
23. recordModStr += "]";  
24. var requestConfig = {  
25.     //url : 'material.do?method=modifyMaterialQuantity×tamp=' + new Date(),  
26.     url : 'maintianceproject.do?method=setMaintaincePrice×tamp=' + new Date(),  
27.     jsonData : recordModStr,  
28.     params : {  
29.         mlist : recordModStr  
30.     },  
31.     callback : function(options, success, reponse) {  
32.         msgTip.hide();  
33.         if (success) {  
34.             Ext.Msg.alert('提示', '保存成功');  
35.             maintainceProjectStore.commitChanges();  
36.         } else {  
37.             Ext.Msg.alert('提示', '保存失败');  
38.         }  
39.     }  
40. }  
41. Ext.Ajax.request(requestConfig);  
42.       
43. }  

 

这里使用了

[c-sharp]  view plain copy print ?

1. Ext.Ajax.request(requestConfig);  

 

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

 

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

[c-sharp]  view plain copy print ?

1. private ModelAndView setMaintaincePrice(HttpServletRequest request,  
2.             HttpServletResponse response) throws IOException {  
3.         String jsonstr = request.getParameter("mlist");  
4.         // test  
5.         System.out.println(jsonstr);  
6.         jsonstr = URLDecoder.decode(jsonstr, "utf-8");  
7.         JSONArray array = JSONArray.fromObject(jsonstr);  
8.         MaintianceprojectForm[] obj = new MaintianceprojectForm[array.size()];  
9.         boolean b = false;  
10.         for (int i = 0; i < array.size(); i++) {  
11.             JSONObject jsonObject = array.getJSONObject(i);  
12.             obj[i] = (MaintianceprojectForm) JSONObject.toBean(jsonObject,  
13.                     MaintianceprojectForm.class);  
14.             // test  
15.             System.out.println(obj[i].getMaintainceProjectId() + "*****"  
16.                     + obj[i].getPrice());  
17.             Maintianceproject record = new Maintianceproject();  
18.             record.setPrice(obj[i].getPrice());  
19.             b = this.getMaintianceprojectService().updateMaintaincePrice(  
20.                     obj[i].getMaintainceProjectId(), record);  
21.             if (b == false)  
22.                 break;  
23.         }  
24.         if (b) {  
25.             response.getWriter().write("{success:true}");  
26.         } else {  
27.             response.getWriter().write("{success:false}");  
28.         }  
29.         return null;  
30.     }  

 

 

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