Ext.grid.EditorGridPanel使用方法

首先定義一個EditorGridPanel，

var maintainceOrderGrid = new Ext.grid.EditorGridPanel( {// 建立Grid表格組件<br />applyTo : 'maintainorderinfo-grid-div',// 設定表格現實位置<br />frame : true,// 渲染表格面板<br />tbar : toolbar,// 設定頂端工具列<br />stripeRows : true,// 顯示斑馬線<br />autoScroll : true,// 當資料查過表格寬度時，顯示捲軸<br />store : maintainceProjectStore,// 設定表格對應的資料集<br />viewConfig : {// 自動充滿表格<br />autoFill : true<br />},<br />sm : sm,// 設定表格複選框<br />cm : cm,// 設定表格的列<br />bbar : new Ext.PagingToolbar( {<br />pageSize : 25,<br />store : maintainceProjectStore,<br />displayInfo : true,<br />displayMsg : '顯示第{0}條到{1}條記錄,一共{2}條記錄',<br />emptyMsg : '沒有記錄'<br />})<br />}); 

 

接著定義grid中用到的sm和cm，

var sm = new Ext.grid.CheckboxSelectionModel();// 建立複選擇模式對象<br />var cm = new Ext.grid.ColumnModel( [// 建立表格列模型<br />new Ext.grid.RowNumberer(), sm, {<br />header : "維修價格",<br />width : 60,<br />dataIndex : 'price',<br />sortable : true,<br />editor : new Ext.form.NumberField( {<br />editable : true,<br />allowNegative : false,<br />allowBlank : false,<br />decimalPrecision : 2,<br />minValue : 0<br />//,<br />//maxValue : 1<br />})<br />} ]); 

 

再定義一個儲存維修價格的toolbar，用於調用儲存維修價格的方法。

var toolbar = new Ext.Toolbar( [ {<br />text : '儲存維修價格',<br />iconCls : 'add',<br />handler : setMaintaincePrice<br />} ]); 

 

儲存維修價格的方法如下：

function setMaintaincePrice() {//設定維修價格<br />var mr = maintainceProjectStore.getModifiedRecords();// 擷取所有更新過的記錄<br />var recordCount = maintainceProjectStore.getCount();// 擷取資料集中記錄的數量</p><p>if (mr.length == 0) {<br />Ext.MessageBox.alert('提示', '沒有修改資料！');<br />}<br />else<br />{<br />var msgTip = Ext.MessageBox.show( {<br />title : '提示',<br />width : 250,<br />msg : '正在提交更改請稍後......'<br />});<br />var recordModStr = "[";// 以josn方式儲存資料<br />for ( var i = 0; i < mr.length; i++) {<br />recordModStr += "{maintainceProjectId:"<br />+ mr[i].data["maintainceProjectId"] + ",price:"<br />+ mr[i].data["price"] + "}";<br />if (i < mr.length - 1)<br />recordModStr += ",";<br />}<br />recordModStr += "]";<br />var requestConfig = {<br />//url : 'material.do?method=modifyMaterialQuantity×tamp=' + new Date(),<br />url : 'maintianceproject.do?method=setMaintaincePrice×tamp=' + new Date(),<br />jsonData : recordModStr,<br />params : {<br />mlist : recordModStr<br />},<br />callback : function(options, success, reponse) {<br />msgTip.hide();<br />if (success) {<br />Ext.Msg.alert('提示', '儲存成功');<br />maintainceProjectStore.commitChanges();<br />} else {<br />Ext.Msg.alert('提示', '儲存失敗');<br />}<br />}<br />}<br />Ext.Ajax.request(requestConfig);</p><p>}<br />} 

這裡使用了

Ext.Ajax.request(requestConfig); 

Ajax動態向後台發送請求的方法。這也是ExtJs前後台傳遞訊息的有效方法之一。

 

下面列出後台讀取josn的方法：

private ModelAndView setMaintaincePrice(HttpServletRequest request,<br />HttpServletResponse response) throws IOException {<br />String jsonstr = request.getParameter("mlist");<br />// test<br />System.out.println(jsonstr);<br />jsonstr = URLDecoder.decode(jsonstr, "utf-8");<br />JSONArray array = JSONArray.fromObject(jsonstr);<br />MaintianceprojectForm[] obj = new MaintianceprojectForm[array.size()];<br />boolean b = false;<br />for (int i = 0; i < array.size(); i++) {<br />JSONObject jsonObject = array.getJSONObject(i);<br />obj[i] = (MaintianceprojectForm) JSONObject.toBean(jsonObject,<br />MaintianceprojectForm.class);<br />// test<br />System.out.println(obj[i].getMaintainceProjectId() + "*****"<br />+ obj[i].getPrice());<br />Maintianceproject record = new Maintianceproject();<br />record.setPrice(obj[i].getPrice());<br />b = this.getMaintianceprojectService().updateMaintaincePrice(<br />obj[i].getMaintainceProjectId(), record);<br />if (b == false)<br />break;<br />}<br />if (b) {<br />response.getWriter().write("{success:true}");<br />} else {<br />response.getWriter().write("{success:false}");<br />}<br />return null;<br />}