[置顶] ExtJS EditorGridPanel 示例之JSON格式Store前后台增删改查
json格式传递数据示例，入口html页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>用户数据编辑 用JsonReader 实现分页</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <meta http-equiv="author" content="hoojo"> <meta http-equiv="email" content="[email protected]"> <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> <script type="text/javascript" src="JsonPagingEditorGridPanel.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 JsonPagingEditorGridPanel(); }); </script> </head> <body> </body> </html>
JsonPagingEditorGridPanel.js：
/** * 用JSON格式的数据形式：Ext.data.Store，Ext.data.JsonReader解析器，实现editorGrid的增删改查 * author: hoojo * email: [email protected] * blog: http://blog.csdn.net/IBM_hoojo * ext-lib: v2.2 */ /****************************************************************/ /*******JsonPagingEditorGridPanel*******/ /****************************************************************/ JsonPagingEditorGridPanel = 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: JsonPagingEditorGridPanel.USER_STORE_URL, reader: new Ext.data.JsonReader({ 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:"id", direction:"ASC"} //排序 }); JsonPagingEditorGridPanel.superclass.constructor.call(this, { renderTo: Ext.getBody(), width: 480, height: 300, frame: true, //loadMask:true, //显示加载旋转条 stripeRows: true, //隔行变色，区分表格行 clicksToEdit: 2, //表示点击多少次数才可以编辑表格 collapsible: true, //是否在右上角显示收缩按钮 animCollapse: true, //表示收缩（闭合）面板时，显示动画效果 trackMouseOver: true, //鼠标在行上移动时显示高亮 enableColumnMove: false,//禁止用户拖动表头 //disableSelection:true, autoExpandColumn: "name", //这里指定的name的id ，此属性可以根据当前列 填充空白区域 title: "用户数据编辑器", tbar: [ "->","查看方式：", this.sexCombo, { text: "添加数据", handler: this.onAddClick, scope: this },"-",{ text: "删除数据", handler: this.onRemoveClick, scope: this },"-",{ text: "保存数据", handler: this.onCommitStore, scope: this } ], bbar: new Ext.PagingToolbar({ //width: 480, //如果pagingToolbar不在bbar[]括号中就不需要width，否则就要指定宽度才能显示displayInfo pageSize: 5, store: this.store, displayInfo: true, displayMsg: "显示第{0}-{1}条,共有{2}条记录", emptyMsg: "没有记录" }), 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); Ext.example.msg('Click','You clicked on "Action 1".'); }); }, filterSex: function (cob) { if (cob.getValue() == "全部"){ this.store.clearFilter(); } else this.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); } } } }); JsonPagingEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=json";
后台java code：
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 ("json".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("{id:/"").append(u.getId()) .append("/",name:/"").append(u.getName()) .append("/",age:").append(u.getAge()) .append(",sex:/"").append(u.getSex()) .append("/",birthday:/"").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); } }
![[置顶] ExtJS EditorGridPanel 示例之JSON格式Store前后台增删改查_第1张图片](http://img.e-com-net.com/image/info5/0e7c392a30864221b667fb712bbe08ef.jpg)
至此，ExtJS中常用的3中交互方式的示例全部在此。其中json格式交互方式最为常用。
原因是xml格式体积过于庞大，里面有标签过多。而array数组格式的文件，虽然提交很小。
传输速度快。但在数据量很大的情况下，数据的可读性几乎全无。后来出现了json，
它简化了xml文件提交庞大的问题，可读性也非常好、在网络中的传输速度也很快，且易于使用、学习。