樣本入口頁面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>使用者資料編輯 User EditorGridPanel</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="UserEditorGridPanel.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 UserEditorGridPanel();<br />});<br /></script><br /></head><br /><body></p><p></body><br /></html>
UserEditorGridPanel.js：
/**<br /> * 用Array格式的資料形式：Ext.data.SimpleStore，預設數組解析器，實現editorGrid的增刪改查<br /> * 上一樣本擴充了ArrayReader組件就支援分頁，這裡用預設的就不支援分頁了；<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 />UserEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {<br />sexCombo: null,<br />inserted: [],<br />constructor: function () {</p><p>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.SimpleStore({<br />autoLoad: true,<br />url: UserEditorGridPanel.USER_STORE_URL,<br />fields: ["id","name",<br />"age", "sex",<br />{name: "birthday", type: "date", dateFormat: "Y-m-d"}<br />],<br />sortInfo:{field:"name", direction:"ASC"} //排序<br />});</p><p>UserEditorGridPanel.superclass.constructor.call(this, {<br />renderTo: Ext.getBody(),<br />width: 480,<br />height: 300,<br />frame: true,<br />stripeRows: true,<br />clicksToEdit: 2, //表示點擊多少次數才可以編輯表格<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 />],<br />bbar: [{<br />text: "添加資料",<br />handler: this.onAddClick,<br />scope: this<br />},"-",{<br />text: "刪除資料",<br />handler: this.onRemoveClick,<br />scope: this<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: 1000000000,<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 />})</p><p>});</p><p>/*Ext.Ajax.on("requestcomplete", function (conn, response, options) {<br />alert(response.responseText);<br />});*/<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 />UserEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=all";
後台增刪改查方法Servlet 代碼：
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 />PrintWriter out = response.getWriter();</p><p>StringBuilder builder = new StringBuilder();<br />String method = request.getParameter("method");<br />if ("all".equals(method)) {<br />List<UserInfo> list = dao.loadUserInfo();</p><p>builder.append("[");<br />for (int i = 0; i < list.size(); i++) {<br />UserInfo u = (UserInfo) list.get(i);<br />builder.append("[/"").append(u.getId())<br />.append("/",/"").append(u.getName())<br />.append("/",").append(u.getAge())<br />.append(",/"").append(u.getSex())<br />.append("/",/"").append(u.getBirthday())<br />.append("/"]");<br />if (i < list.size()-1) {<br />builder.append(",");<br />}<br />}<br />builder.append("]");</p><p>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>}
插入圖片以示真相，確實用預設的ArrayReader是不能分頁。就算加上Ext.PagingToolbar分頁工具條也是枉然，只是個擺設
不能分頁的，但可以結合待用資料分頁的store還是可以的；見：http://blog.csdn.net/IBM_hoojo/archive/2010/08/19/5823820.aspx
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
