ExtJS EditorGridPanel 示例之Array格式Store前后台增删改查（不支持分页）

本文链接：https://blog.youkuaiyun.com/IBM_hoojo/article/details/5843384

本文介绍使用ExtJS实现用户数据编辑表格的方法，包括增删改查功能，并展示了如何通过Ajax与后台交互，完成数据的实时更新。文章还提供了一个完整的示例，包括HTML页面结构、JavaScript代码以及后台Servlet实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例入口页面html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>用户数据编辑 User EditorGridPanel</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.youkuaiyun.com/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="UserEditorGridPanel.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 UserEditorGridPanel(); }); </script> </head> <body> </body> </html>

UserEditorGridPanel.js：

/** * 用Array格式的数据形式：Ext.data.SimpleStore，默认数组解析器，实现editorGrid的增删改查 * 上一示例扩展了ArrayReader组件就支持分页，这里用默认的就不支持分页了； * author: hoojo * email: hoojo_@126.com * blog: http://blog.youkuaiyun.com/IBM_hoojo * ext-lib: v2.2 */ /****************************************************************/ /*******UserEditorGridPanel*******/ /****************************************************************/ UserEditorGridPanel = 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.SimpleStore({ autoLoad: true, url: UserEditorGridPanel.USER_STORE_URL, fields: ["id","name", "age", "sex", {name: "birthday", type: "date", dateFormat: "Y-m-d"} ], sortInfo:{field:"name", direction:"ASC"} //排序 }); UserEditorGridPanel.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 }], 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 }) }); /*Ext.Ajax.on("requestcomplete", function (conn, response, options) { alert(response.responseText); });*/ }, 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); } } } }); UserEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=all";

后台增删改查方法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 ("all".equals(method)) { List<UserInfo> list = dao.loadUserInfo(); builder.append("["); 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); } }