javascript
ExtJS EditorGridPanel 示例之Array格式（自定义Array解析器）Store前后台增删改查
本示例入口html頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><title>用戶數據編輯 用ArrayReader 實現分頁</title><meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta http-equiv="author" content="hoojo"><meta http-equiv="email" content="hoojo_@126.com"><meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo"> <link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css"></link><script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ext2/ext-all.js"></script><script type="text/javascript" src="../ext2/build/locale/ext-lang-zh_CN-min.js"></script><!-- 用ArrayReader 實現分頁，需要改進ArrayReader 的代碼 --><script type="text/javascript" src="ArrayReader.js"></script><script type="text/javascript" src="ArrayPagingEditorGridPanel.js"></script><script type="text/javascript"> Ext.onReady(function (){Ext.QuickTips.init();//Ext.form.Field.prototype.msgTarget = "side";Ext.BLANK_IMAGE_URL = "../ext2/resources/images/default/s.gif";new ArrayPagingEditorGridPanel();});</script></head><body></body> </html>
?
?ArrayPagingEditorGridPanel.js文件代碼：
/*** 用Array格式的數據形式：Ext.data.Store，自定義Ext.data.ArrayReader數組解析器，實現editorGrid的增刪改查* author: hoojo* email: hoojo_@126.com* blog: http://blog.csdn.net/IBM_hoojo* ext-lib: v2.2*/ /****************************************************************//*******ArrayPagingEditorGridPanel*******/ /****************************************************************/ ArrayPagingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {sexCombo: null,inserted: [],constructor: function () {this.sexCombo = new Ext.form.ComboBox({mode: "local",value: "全部",readOnly: true,triggerAction: "all",displayField: "sex",//listAlign : "bl-tl", //下拉列表的顯示方式 bl-tl是在上方顯示，相反tl-bl是從下方顯示store: new Ext.data.SimpleStore({data: ["男", "女", "全部"],expandData: true,fields: ["sex"]}),listeners: {"select": {fn: this.filterSex,scope: this}}});this["store"] = new Ext.data.Store({ url: ArrayPagingEditorGridPanel.USER_STORE_URL,reader: new Ext.data.ArrayReader({id: "id", //維護當前數據的唯一性（和數據庫主鍵類似，避免數據重復--過濾重復數據）root: "users",totalProperty: "totals"},Ext.data.Record.create(["id","name", {name: "age", type: "int"}, "sex", {name: "birthday", type: "date", dateFormat: "Y-m-d"}])),sortInfo:{field:"name", direction:"ASC"} //排序});ArrayPagingEditorGridPanel.superclass.constructor.call(this, {renderTo: Ext.getBody(),width: 480,height: 300,frame: true,stripeRows: true,clicksToEdit: 2, //表示點擊多少次數才可以編輯表格collapsible: true, //是否在右上角顯示收縮按鈕animCollapse: true, //表示收縮（閉合）面板時，顯示動畫效果trackMouseOver: true, //鼠標在行上移動時顯示高亮enableColumnMove: false,//禁止用戶拖動表頭autoExpandColumn: "name", //這里指定的name的id ，此屬性可以根據當前列 填充空白區域title: "用戶數據編輯器", tbar: ["查看方式：",this.sexCombo,"-",{text: "保存數據", handler: this.onCommitStore,scope: this}],bbar: [{text: "添加數據",handler: this.onAddClick,scope: this},"-",{text: "刪除數據",handler: this.onRemoveClick,scope: this},new Ext.PagingToolbar({pageSize: 5,store: this.store})],columns:[{id: "name",header: "姓名",align: "center",dataIndex: "name",editor: new Ext.form.TextField({allowBlank: false,blankText: "姓名不能為空，必須輸入"})},{header: "年齡",align: "center",dataIndex: "age",editor: new Ext.form.NumberField({allowBlank: false,allowNegative: false, //只能為正數//maxValue: 1000000000,grow: true, //前半部分顯示正在改的數據，后半部分顯示以前的老數據selectOnFocus: true, //當獲得焦點時，選中所有的文本內容minValue: 1})},{header: "性別",align: "center",dataIndex: "sex",editor: new Ext.form.ComboBox({mode: "local", value: "男",readOnly: true,displayField: "sex",triggerAction: "all", store: new Ext.data.SimpleStore({data: ["男", "女"],expandData: true,fields: ["sex"]})})},{header: "生日",align: "center",sortable: true,dataIndex: "birthday",renderer: Ext.util.Format.dateRenderer('Y-m-d'),editor: new Ext.form.DateField({format: "Y-m-d",minValue: "1950-01-01",disabledDays: [0, 7],//datefield的第0列：周日和第7列：周六不能編輯disabledDaysText: "周末不能選擇"})}],sm: new Ext.grid.RowSelectionModel({singleSelect: true})});this.store.load({params: {start: 0, limit: 5}});/*Ext.Ajax.on("requestcomplete", function (conn, response, options) {alert(response.responseText);});*/},filterSex: function (cob) {if (cob.getValue() == "全部"){this.store.clearFilter();}elsethis.store.filter("sex", cob.value);},onAddClick: function () {var rs = new Ext.data.Record({id: "",name: "", age: 1, sex: "", birthday: 0000-00-00});this.getStore().add(rs);rs.set("name", "ext");rs.set("age", 22);rs.set("sex", "男");rs.set("birthday", new Date());this.inserted.push(rs);this.startEditing(this.store.getCount() - 1, 0);},saveInsertData: function (conn, response) {var xml = response.responseXML;var root = xml.documentElement;for (var i = 0; i < root.childNodes.length; i++) {this.inserted[i].set("id", root.childNodes[i].text);}this.getStore().commitChanges();this.inserted = [];},onCommitStore: function () {var mf = this.getStore().modified;var temp = [];for (var i = 0; i < mf.length; i ++) {if (mf[i].get("id") == ""){continue;}var data = {};for (var j in mf[i].modified) {data[j] = mf[i].get(j);}temp.push(Ext.apply(data, {id: mf[i].get("id")})); }for (var i = 0; i < this.inserted.length; i ++) {temp.push(this.inserted[i].data);}Ext.Ajax.on("requestcomplete", function (conn, response, options) {alert(response.responseText);});//Ext.Ajax.on("requestcomplete", this.saveInsertData, this);//想服務器發送請求，傳遞修改的數據（只含修改的數據）Ext.Ajax.request({url: "../ServiceServlet?method=edit", params: {content:Ext.util.JSON.encode(temp)}});this.store.commitChanges(); this.filterSex(this.sexCombo);},onRemoveClick: function () {var rs = this.getSelectionModel();try{if (rs.getCount() == 0) {Ext.Msg.alert("系統提示", "沒有選定數據，請選擇數據行！");}else {Ext.Msg.confirm("系統提示", "您確定要刪除當前數據嗎？", this.removeUserInfo, this);}}catch(er) {Ext.Msg.alert("系統提示", er.discription);}},removeUserInfo: function (btnText) {if (btnText == "yes"){var rs = this.getSelectionModel().getSelected();this.getStore().remove(rs);if (rs.get("id") != "") {Ext.Ajax.on("requestcomplete", function (conn, response, options) {if (response.responseText == "success") {alert("success");}else {alert("failure");}});Ext.Ajax.request({url: "../ServiceServlet?method=remove", params: {id:rs.get("id")}});}else { this.inserted.remove(rs);//this.getStore().modified.romove(rs);}}}}); ArrayPagingEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=arry";
?
后臺java servlet交互代碼：
import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.hoo.dao.IUser; import com.hoo.dao.impl.UserDao; import com.hoo.entity.UserInfo;@SuppressWarnings({"unchecked", "serial"}) public class ServiceServlet extends HttpServlet {private IUser dao = new UserDao();public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("GBK");PrintWriter out = response.getWriter();StringBuilder builder = new StringBuilder();String method = request.getParameter("method"); if ("arry".equals(method)) {int start = Integer.parseInt(request.getParameter("start"));int limit = Integer.parseInt(request.getParameter("limit"));Object[] obj = dao.loadUserInfo(start, limit);List<UserInfo> list = (List<UserInfo>) obj[1];builder.append("{totals:").append(obj[0]).append(",users:[");for (int i = 0; i < list.size(); i++) {UserInfo u = (UserInfo) list.get(i);builder.append("[/"").append(u.getId()).append("/",/"").append(u.getName()) .append("/",").append(u.getAge()).append(",/"").append(u.getSex()).append("/",/"").append(u.getBirthday()).append("/"]");if (i < list.size()-1) {builder.append(",");}}builder.append("]}");out.write(builder.toString());}if ("edit".equals(method)) {String content = request.getParameter("content");out.print(content);}if ("remove".equals(method)) {Integer id = Integer.parseInt(request.getParameter("id"));if (dao.removeUserInfo(id)) {out.print("success");}else {out.print("failure");}}out.flush();out.close();}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}}
?
本示例用ArrayReader解析數組數據分頁，需要擴展原有的ArrayReader.js文件，下面是擴展文件：
Ext.data.ArrayReader = Ext.extend(Ext.data.JsonReader, {readRecords : function(o){var sid = this.meta ? this.meta.id : null;var recordType = this.recordType, fields = recordType.prototype.fields;var records = [];var root = this.meta ? this.meta["root"] ? o[this.meta["root"]] : o : o;for(var i = 0; i < root.length; i++){var n = root[i];var values = {};var id = ((sid || sid === 0) && n[sid] !== undefined && n[sid] !== "" ? n[sid] : null);for(var j = 0, jlen = fields.length; j < jlen; j++){var f = fields.items[j];var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : j;var v = n[k] !== undefined ? n[k] : f.defaultValue;v = f.convert(v, n);values[f.name] = v;}var record = new recordType(values, id);record.json = n;records[records.length] = record;}return {records : records,totalRecords : this.meta ? this.meta["totalProperty"] ? o[this.meta["totalProperty"]] : records.length : records.length};} });
?
?
本示例最大的不同就是采用數據傳遞形式不同，用到的是Array格式。但ext v2.2版本中的ArrayReader結合Ext.data.Store
不支持分頁，所以本示例進行擴展ArrayReader文件。
總結
以上是生活随笔為你收集整理的ExtJS EditorGridPanel 示例之Array格式（自定义Array解析器）Store前后台增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 云账户合法吗_云账户
- 下一篇： ξσ Dicky's GuestBook