當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2024/8/1 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 ExtJS EditorGridPanel 示例之JSON格式Store前后台增删改查小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

json格式傳遞數據示例，入口html頁面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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="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="JsonPagingEditorGridPanel.js"></script>?
???<scripttype="text/javascript">?????????
???????Ext.onReady(function (){??
???????????Ext.QuickTips.init();??
???????????//Ext.form.Field.prototype.msgTarget ="side";??
??????????????
???????????Ext.BLANK_IMAGE_URL ="../ext2/resources/images/default/s.gif";??
???????????newJsonPagingEditorGridPanel();??
???????});??
???</script>?
???</head>?
???<body>?
?
???</body>?
</html>?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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="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="JsonPagingEditorGridPanel.js"></script>
?<scripttype="text/javascript">??
??Ext.onReady(function (){
???Ext.QuickTips.init();
???//Ext.form.Field.prototype.msgTarget= "side";
???
???Ext.BLANK_IMAGE_URL= "../ext2/resources/images/default/s.gif";
???newJsonPagingEditorGridPanel();
??});
?</script>
?</head>
?<body>

?</body>
</html>

JsonPagingEditorGridPanel.js：

?
?
JsonPagingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{??
??? sexCombo:null,??
??? inserted:[],??
??? constructor:function () {??
??????
???????this.sexCombo = newExt.form.ComboBox({??
???????????mode: "local",??
???????????value: "全部",??
???????????readOnly: true,??
???????????triggerAction: "all",??
???????????displayField: "sex",??
???????????//listAlign : "bl-tl", //下拉列表的顯示方式bl-tl是在上方顯示，相反tl-bl是從下方顯示??
???????????store: newExt.data.SimpleStore({??
???????????????data: ["男", "女", "全部"],??
???????????????expandData: true,??
???????????????fields: ["sex"]??
???????????}),??
???????????listeners: {??
???????????????"select": {??
???????????????????fn: this.filterSex,??
???????????????????scope: this?
???????????????}??
???????????}??
???????});??
??????????
???????this["store"] = newExt.data.Store({??
???????????url:JsonPagingEditorGridPanel.USER_STORE_URL,??
???????????reader: newExt.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: newExt.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: newExt.form.TextField({??
???????????????????allowBlank: false,??
???????????????????blankText: "姓名不能為空，必須輸入"?
???????????????})??
???????????},{??
???????????????header: "年齡",??
???????????????align: "center",??
???????????????dataIndex: "age",??
???????????????editor: newExt.form.NumberField({??
???????????????????allowBlank: false,??
???????????????????allowNegative: false,//只能為正數??
???????????????????//maxValue: 1000000000,??
???????????????????grow: true,//前半部分顯示正在改的數據，后半部分顯示以前的老數據??
???????????????????selectOnFocus: true,//當獲得焦點時，選中所有的文本內容??
???????????????????minValue: 1??
???????????????})??
???????????},{??
???????????????header: "性別",??
???????????????align: "center",??
???????????????dataIndex: "sex",??
???????????????editor: newExt.form.ComboBox({??
???????????????????mode:"local",????????????????????
???????????????????value: "男",??
???????????????????readOnly: true,??
???????????????????displayField: "sex",??
???????????????????triggerAction:"all",?????????????????????????????????????????
???????????????????store: newExt.data.SimpleStore({??
???????????????????????data: ["男", "女"],??
???????????????????????expandData: true,??
???????????????????????fields: ["sex"]??
???????????????????})??
???????????????})??
???????????},{??
???????????????header: "生日",??
???????????????align: "center",??
???????????????sortable: true,??
???????????????dataIndex: "birthday",??
???????????????renderer:Ext.util.Format.dateRenderer('Y-m-d'),??
???????????????editor: newExt.form.DateField({??
???????????????????format: "Y-m-d",??
???????????????????minValue: "1950-01-01",??
???????????????????disabledDays: [0,7],//datefield的第0列：周日和第7列：周六不能編輯??
???????????????????disabledDaysText: "周末不能選擇"?
???????????????})??
???????????}],??
???????????sm: newExt.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 "Action1".');??
?
???????});??
???},??
??? 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", newDate());??
???????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";?

JsonPagingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
?sexCombo: null,
?inserted: [],
?constructor: function () {
?
??this.sexCombo = newExt.form.ComboBox({
???mode:"local",
???value:"全部",
???readOnly:true,
???triggerAction:"all",
???displayField:"sex",
???//listAlign :"bl-tl", //下拉列表的顯示方式 bl-tl是在上方顯示，相反tl-bl是從下方顯示
???store: newExt.data.SimpleStore({
????data:["男", "女", "全部"],
????expandData:true,
????fields:["sex"]
???}),
???listeners:{
????"select":{
?????fn:this.filterSex,
?????scope:this
????}
???}
??});
??
??this["store"] = newExt.data.Store({
???url:JsonPagingEditorGridPanel.USER_STORE_URL,
???reader: newExt.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: newExt.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: newExt.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','Youclicked on "Action 1".');

??});
?},
?filterSex: function (cob) {
??if (cob.getValue() =="全部"){
???this.store.clearFilter();
??}
??else
???this.store.filter("sex",cob.value);
?},
?onAddClick: function () {
??var rs = newExt.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", newDate());
??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 inmf[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：

importjava.io.PrintWriter;??
import java.util.List;??
importjavax.servlet.ServletException;??
importjavax.servlet.http.HttpServlet;??
importjavax.servlet.http.HttpServletRequest;??
importjavax.servlet.http.HttpServletResponse;??
import com.hoo.dao.IUser;??
importcom.hoo.dao.impl.UserDao;??
importcom.hoo.entity.UserInfo;??
?
@SuppressWarnings({"unchecked","serial"})??
public class ServiceServlet extends HttpServlet{??
??????
??? privateIUser dao = newUserDao();??
??????
??? public voiddoGet(HttpServletRequest request, HttpServletResponseresponse)??
???????????throws ServletException, IOException{??
???????response.setCharacterEncoding("GBK");??
??????????
???????PrintWriter out =response.getWriter();??
??????????
???????StringBuilder builder = newStringBuilder();??
???????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 voiddoPost(HttpServletRequest request, HttpServletResponseresponse)??
???????????throws ServletException, IOException{??
???????this.doGet(request,response);??
???}??
?
}?
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)
???throwsServletException, IOException {
??response.setCharacterEncoding("GBK");
??
??PrintWriter out =response.getWriter();
??
??StringBuilder builder = newStringBuilder();
??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++) {
????UserInfou = (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)){
???Stringcontent = 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)
???throwsServletException, IOException {
??this.doGet(request,response);
?}

}

至此，ExtJS中常用的3中交互方式的示例全部在此。其中json格式交互方式最為常用。

原因是xml格式體積過于龐大，里面有標簽過多。而array數組格式的文件，雖然提交很小。

傳輸速度快。但在數據量很大的情況下，數據的可讀性幾乎全無。后來出現了json，

它簡化了xml文件提交龐大的問題，可讀性也非常好、在網絡中的傳輸速度也很快，且易于使用、學習。

總結

以上是生活随笔為你收集整理的ExtJS EditorGridPanel 示例之JSON格式Store前后台增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： QQ客服代码(支持临时会话设置)
下一篇：奇妙的数字小明发现了一个奇妙的数字，他的