ExtJS EditorGridPanel 示例之xml格式Store前后台增删改查

最新推荐文章于 2018-04-02 22:20:55 发布

hoojo

最新推荐文章于 2018-04-02 22:20:55 发布

阅读量3.1k

点赞数

分类专栏： RCP【富客户端技术】 ExtJS JavaScript Ajax【富客户端技术】 ExtJS 专栏文章标签： xml extjs function header stylesheet url

本文链接：https://blog.csdn.net/IBM_hoojo/article/details/5843303

版权

JavaScript 同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

RCP【富客户端技术】

38 篇文章 0 订阅

订阅专栏

Ajax【富客户端技术】

24 篇文章 0 订阅

订阅专栏

程序入口html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>用户数据编辑 XmlReader 实现分页</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> <script type="text/javascript" src="UserPagingEditorGridPanel.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 UserPagingEditorGridPanel(); }); </script> </head> <body> </body> </html>

UserPagingEditorGridPanel.js：

/** * 用xml格式的数据形式：Ext.data.Store、Ext.data.XmlReader解析器，实现editorGrid的增删改查 * author: hoojo * email: hoojo_@126.com * blog: http://blog.csdn.net/IBM_hoojo * ext-lib: v2.2 */ /****************************************************************/ /*******UserEditorGridPanel*******/ /****************************************************************/ UserPagingEditorGridPanel = 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: UserPagingEditorGridPanel.USER_STORE_URL, reader: new Ext.data.XmlReader({ id: "id", record: "user", totalRecords: "totals" //如果是属性（非节点）要用@totals——<users totals="2"> }, Ext.data.Record.create(["id","name", {name: "age", type: "int"}, "sex", {name: "birthday", type: "date", dateFormat: "Y-m-d"} ]) ), sortInfo:{field:'name', direction:'ASC'} //排序 }); UserPagingEditorGridPanel.superclass.constructor.call(this, { renderTo: Ext.getBody(), width: 480, height: 300, frame: true, stripeRows: true, clicksToEdit: 1, //表示点击多少次数才可以编辑表格 collapsible: true, //是否在右上角显示收缩按钮 animCollapse: true, //表示收缩（闭合）面板时，显示动画效果 trackMouseOver: true, //鼠标在行上移动时显示高亮 enableColumnMove: false,//禁止用户拖动表头 autoExpandColumn: "name", //这里指定的name的id ，此属性可以根据当前列填充空白区域 title: "用户数据编辑器", tbar: [ "查看方式：", this.sexCombo, "-", { text: "保存数据", handler: this.onCommitStore, scope: this },"-",{ text: "添加数据", handler: this.onAddClick, scope: this },"-",{ text: "删除数据", handler: this.onRemoveClick, scope: this } ], bbar: 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: 200, 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", this.savaInsertData, this); }, 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); } } } }); UserPagingEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=xml";

后台Servlet代码，ServiceServlet?method=xml方法代码

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"); response.setContentType("text/xml");//#text/xml# 一定要这样才能正常解析 PrintWriter out = response.getWriter(); StringBuilder builder = new StringBuilder(); String method = request.getParameter("method"); if ("xml".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("<?xml version=/"1.0/" encoding=/"gbk/"?>") //.append("<users totals=/"").append(obj[0]).append("/">"); .append("<users><totals>").append(obj[0]).append("</totals>"); for (int i = 0; i < list.size(); i++) { UserInfo u = (UserInfo) list.get(i); builder.append("<user><id>").append(u.getId()) .append("</id><name>").append(u.getName()) .append("</name><age>").append(u.getAge()) .append("</age><sex>").append(u.getSex()) .append("</sex><birthday>").append(u.getBirthday()) .append("</birthday></user>"); } builder.append("</users>"); 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); } }

本示例用到的是Ext.data.Store/Ext.data.XmlReader解析器，解析后台传递的xml格式数据，当然也可以将

UserPagingEditorGridPanel.USER_STORE_URL = "your.xml";这样也是可以的，但注意的是文件中定义的xml

文档的格式要和store中的Ext.data.Record.create解析数据标签名称对应，本示例还用到了数据的简单过滤“性别”

以及对脏数据的显示及其提交、修改等，下次将会提供更复杂的过滤查询。

hoojo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
ExtJS EditorGridPanel 示例之xml格式Store前后台增删改查

本示例用到的是Ext.data.Store/Ext.data.XmlReader解析器，解析后台传递的xml格式数据，当然也可以将UserPagingEditorGridPanel.USER_STORE_URL = "your.xml";这样也是可以的，但注意的是文件中定义的xml文档的格式要和store中的Ext.data.Record.create解析数据标签名称对应，本示例还用到了数据的简单过滤“性别”以及对脏数据的显示及其提交、修改等，下次将会提供更复杂的过滤查询。
复制链接

扫一扫