程式入口html頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html><br /><head><br /><title>使用者資料編輯 XmlReader 實現分頁</title><br /><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><br /><meta http-equiv="author" content="hoojo"><br /> <meta http-equiv="email" content="hoojo_@126.com"><br /> <meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo"><br /><link rel="stylesheet" type="text/css" href="../ext2/resources/css/ext-all.css"></link><br /><script type="text/javascript" src="../ext2/adapter/ext/ext-base.js"></script><br /><script type="text/javascript" src="../ext2/ext-all.js"></script><br /><script type="text/javascript" src="../ext2/build/locale/ext-lang-zh_CN-min.js"></script><br /><script type="text/javascript" src="UserPagingEditorGridPanel.js"></script><br /><script type="text/javascript"><br />Ext.onReady(function (){<br />Ext.QuickTips.init();<br />//Ext.form.Field.prototype.msgTarget = "side";</p><p>Ext.BLANK_IMAGE_URL = "../ext2/resources/images/default/s.gif";</p><p>new UserPagingEditorGridPanel();<br />});<br /></script><br /></head><br /><body></p><p></body><br /></html>
UserPagingEditorGridPanel.js：
/**<br /> * 用xml格式的資料形式：Ext.data.Store、Ext.data.XmlReader解析器，實現editorGrid的增刪改查<br /> * author: hoojo<br /> * email: hoojo_@126.com<br /> * blog: http://blog.csdn.net/IBM_hoojo<br /> * ext-lib: v2.2<br /> */<br />/****************************************************************/<br />/*******UserEditorGridPanel*******/<br />/****************************************************************/<br />UserPagingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {<br />sexCombo: null,<br />inserted: [],<br />constructor: function () {<br />this.sexCombo = new Ext.form.ComboBox({<br />mode: "local",<br />value: "全部",<br />readOnly: true,<br />triggerAction: "all",<br />displayField: "sex",<br />//listAlign : "bl-tl", //下拉式清單的顯示方式 bl-tl是在上方顯示，相反tl-bl是從下方顯示<br />store: new Ext.data.SimpleStore({<br />data: ["男", "女", "全部"],<br />expandData: true,<br />fields: ["sex"]<br />}),<br />listeners: {<br />"select": {<br />fn: this.filterSex,<br />scope: this<br />}<br />}<br />});</p><p>this["store"] = new Ext.data.Store({<br />url: UserPagingEditorGridPanel.USER_STORE_URL,<br />reader: new Ext.data.XmlReader({<br />id: "id",<br />record: "user",<br />totalRecords: "totals" //如果是屬性（非節點）要用@totals——<users totals="2"><br />},<br />Ext.data.Record.create(["id","name",<br />{name: "age", type: "int"}, "sex",<br />{name: "birthday", type: "date", dateFormat: "Y-m-d"}<br />])<br />),<br />sortInfo:{field:'name', direction:'ASC'} //排序<br />});</p><p>UserPagingEditorGridPanel.superclass.constructor.call(this, {<br />renderTo: Ext.getBody(),<br />width: 480,<br />height: 300,<br />frame: true,<br />stripeRows: true,<br />clicksToEdit: 1, //表示點擊多少次數才可以編輯表格<br />collapsible: true, //是否在右上方顯示收縮按鈕<br />animCollapse: true, //表示收縮（閉合）面板時，顯示動畫效果<br />trackMouseOver: true, //滑鼠在行上移動時顯示高亮<br />enableColumnMove: false,//禁止使用者拖動表頭<br />autoExpandColumn: "name", //這裡指定的name的id ，此屬性可以根據當前列 填充空白地區<br />title: "使用者資料編輯器",<br />tbar: [<br />"查看方式：",<br />this.sexCombo,<br />"-",<br />{<br />text: "儲存資料",<br />handler: this.onCommitStore,<br />scope: this<br />},"-",{<br />text: "添加資料",<br />handler: this.onAddClick,<br />scope: this<br />},"-",{<br />text: "刪除資料",<br />handler: this.onRemoveClick,<br />scope: this<br />}<br />],<br />bbar: new Ext.PagingToolbar({<br />pageSize: 5,<br />store: this.store<br />}),<br />columns:[{<br />id: "name",<br />header: "姓名",<br />align: "center",<br />dataIndex: "name",<br />editor: new Ext.form.TextField({<br />allowBlank: false,<br />blankText: "姓名不可為空，必須輸入"<br />})<br />},{<br />header: "年齡",<br />align: "center",<br />dataIndex: "age",<br />editor: new Ext.form.NumberField({<br />allowBlank: false,<br />allowNegative: false, //只能為正數<br />maxValue: 200,<br />grow: true, //前半部分顯示正在改的資料，後半部分顯示以前的老資料<br />selectOnFocus: true, //當獲得焦點時，選中所有的常值內容<br />minValue: 1<br />})<br />},{<br />header: "性別",<br />align: "center",<br />dataIndex: "sex",<br />editor: new Ext.form.ComboBox({<br />mode: "local",<br />value: "男",<br />readOnly: true,<br />displayField: "sex",<br />triggerAction: "all",<br />store: new Ext.data.SimpleStore({<br />data: ["男", "女"],<br />expandData: true,<br />fields: ["sex"]<br />})<br />})<br />},{<br />header: "生日",<br />align: "center",<br />sortable: true,<br />dataIndex: "birthday",<br />renderer: Ext.util.Format.dateRenderer('Y-m-d'),<br />editor: new Ext.form.DateField({<br />format: "Y-m-d",<br />minValue: "1950-01-01",<br />disabledDays: [0, 7],//datefield的第0列：周日和第7列：周六不能編輯<br />disabledDaysText: "周末不能選擇"<br />})<br />}],<br />sm: new Ext.grid.RowSelectionModel({<br />singleSelect: true<br />})<br />});<br />this.store.load({params: {start: 0, limit: 5}});</p><p>//Ext.Ajax.on("requestcomplete", this.savaInsertData, this);<br />},<br />filterSex: function (cob) {<br />if (cob.getValue() == "全部"){<br />this.store.clearFilter();<br />}<br />else<br />this.store.filter("sex", cob.value);<br />},<br />onAddClick: function () {<br />var rs = new Ext.data.Record({id: "",name: "", age: 1, sex: "", birthday: 0000-00-00});<br />this.getStore().add(rs);<br />rs.set("name", "ext");<br />rs.set("age", 22);<br />rs.set("sex", "男");<br />rs.set("birthday", new Date());<br />this.inserted.push(rs);<br />this.startEditing(this.store.getCount() - 1, 0);<br />},<br />saveInsertData: function (conn, response) {<br />var xml = response.responseXML;<br />var root = xml.documentElement;<br />for (var i = 0; i < root.childNodes.length; i++) {<br />this.inserted[i].set("id", root.childNodes[i].text);<br />}<br />this.getStore().commitChanges();<br />this.inserted = [];<br />},<br />onCommitStore: function () {<br />var mf = this.getStore().modified;<br />var temp = [];<br />for (var i = 0; i < mf.length; i ++) {<br />if (mf[i].get("id") == ""){<br />continue;<br />}<br />var data = {};<br />for (var j in mf[i].modified) {<br />data[j] = mf[i].get(j);<br />}<br />temp.push(Ext.apply(data, {id: mf[i].get("id")}));<br />}</p><p>for (var i = 0; i < this.inserted.length; i ++) {<br />temp.push(this.inserted[i].data);<br />}<br />/*Ext.Ajax.on("requestcomplete", function (conn, response, options) {<br />alert(response.responseText);<br />});*/<br />//Ext.Ajax.on("requestcomplete", this.saveInsertData, this);<br />//想伺服器發送請求，傳遞修改的資料（只含修改的資料）<br />Ext.Ajax.request({url: "../ServiceServlet?method=edit", params: {content:Ext.util.JSON.encode(temp)}});<br />this.store.commitChanges();<br />this.filterSex(this.sexCombo);<br />},<br />onRemoveClick: function () {<br />var rs = this.getSelectionModel();<br />try{<br />if (rs.getCount() == 0) {<br />Ext.Msg.alert("系統提示", "沒有選定資料，請選擇資料行！");</p><p>}else {<br />Ext.Msg.confirm("系統提示", "您確定要刪除當前資料嗎？", this.removeUserInfo, this);<br />}<br />}catch(er) {<br />Ext.Msg.alert("系統提示", er.discription);<br />}<br />},<br />removeUserInfo: function (btnText) {<br />if (btnText == "yes"){<br />var rs = this.getSelectionModel().getSelected();<br />this.getStore().remove(rs);</p><p>if (rs.get("id") != "") {<br />Ext.Ajax.on("requestcomplete", function (conn, response, options) {<br />if (response.responseText == "success") {<br />alert("success");<br />}else {<br />alert("failure");<br />}<br />});<br />Ext.Ajax.request({url: "../ServiceServlet?method=remove", params: {id:rs.get("id")}});<br />}else {<br />this.inserted.remove(rs);<br />this.getStore().modified.romove(rs);<br />}<br />}<br />}</p><p>});<br />UserPagingEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=xml";
後台Servlet代碼，ServiceServlet?method=xml方法代碼
import java.io.PrintWriter;<br />import java.util.List;<br />import javax.servlet.ServletException;<br />import javax.servlet.http.HttpServlet;<br />import javax.servlet.http.HttpServletRequest;<br />import javax.servlet.http.HttpServletResponse;<br />import com.hoo.dao.IUser;<br />import com.hoo.dao.impl.UserDao;<br />import com.hoo.entity.UserInfo;</p><p>@SuppressWarnings({"unchecked", "serial"})<br />public class ServiceServlet extends HttpServlet {</p><p>private IUser dao = new UserDao();</p><p>public void doGet(HttpServletRequest request, HttpServletResponse response)<br />throws ServletException, IOException {<br />response.setCharacterEncoding("GBK");<br />response.setContentType("text/xml");//#text/xml# 一定要這樣才能正常解析<br />PrintWriter out = response.getWriter();</p><p>StringBuilder builder = new StringBuilder();<br />String method = request.getParameter("method");<br />if ("xml".equals(method)) {<br />int start = Integer.parseInt(request.getParameter("start"));<br />int limit = Integer.parseInt(request.getParameter("limit"));</p><p>Object[] obj = dao.loadUserInfo(start, limit);<br />List<UserInfo> list = (List<UserInfo>) obj[1];<br />builder.append("<?xml version=/"1.0/" encoding=/"gbk/"?>")<br />//.append("<users totals=/"").append(obj[0]).append("/">");<br />.append("<users><totals>").append(obj[0]).append("</totals>");<br />for (int i = 0; i < list.size(); i++) {<br />UserInfo u = (UserInfo) list.get(i);<br />builder.append("<user><id>").append(u.getId())<br />.append("</id><name>").append(u.getName())<br />.append("</name><age>").append(u.getAge())<br />.append("</age><sex>").append(u.getSex())<br />.append("</sex><birthday>").append(u.getBirthday())<br />.append("</birthday></user>");<br />}<br />builder.append("</users>");<br />out.write(builder.toString());<br />}<br />if ("edit".equals(method)) {<br />String content = request.getParameter("content");</p><p>out.print(content);<br />}</p><p>if ("remove".equals(method)) {<br />Integer id = Integer.parseInt(request.getParameter("id"));<br />if (dao.removeUserInfo(id)) {<br />out.print("success");<br />}else {<br />out.print("failure");<br />}<br />}<br />out.flush();<br />out.close();<br />}</p><p>public void doPost(HttpServletRequest request, HttpServletResponse response)<br />throws ServletException, IOException {<br />this.doGet(request, response);<br />}</p><p>}
本樣本用到的是Ext.data.Store/Ext.data.XmlReader解析器，解析後台傳遞的xml格式資料，當然也可以將
UserPagingEditorGridPanel.USER_STORE_URL = "your.xml";這樣也是可以的，但注意的是檔案中定義的xml
文檔的格式要和store中的Ext.data.Record.create解析資料標籤名稱對應，本樣本還用到了資料的簡單過濾“性別”
以及對髒資料的顯示及其提交、修改等，下次將會提供更複雜的過濾查詢。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
