首先定義一個EditorGridPanel，

[c-sharp]?view plaincopyprint?

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，

[c-sharp]?view plaincopyprint?

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，用于調用保存維修價格的方法。

[c-sharp]?view plaincopyprint?

var?toolbar?=?new?Ext.Toolbar(?[??{??

????????????????text?:?'保存維修價格',??

????????????????iconCls?:?'add',??

????????????????handler?:?setMaintaincePrice??

????????????}?]);??

?

?

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

[c-sharp]?view plaincopyprint?

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);??

??????

}??

?

這里使用了

[c-sharp]?view plaincopyprint?

Ext.Ajax.request(requestConfig);??

?

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

?

下面列出后臺讀取josn的方法：

[c-sharp]?view plaincopyprint?

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}");??

????????}?else?{??

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

????????}??

????????return?null;??

????}??

?

?

本文轉自xwdreamer博客園博客，原文鏈接：http://www.cnblogs.com/xwdreamer/archive/2010/12/29/2297054.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的Ext.grid.EditorGridPanel使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。