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

来源：互联网发布：博雅大数据学院官网编辑：程序博客网时间：2024/05/17 23:42

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文件提交庞大的问题，可读性也非常好、在网络中的传输速度也很快，且易于使用、学习。

阅读全文

0 0