extjs表格编辑、EditorGridPanel

阅读更多

EditorGridPanel连接后台数据库做更新操作.对于EditGridPanel编辑修改数据后更新到数据库的实现,通常有两种策略: 1.一种是监听EditorGridPanel的afteredit,每一次编辑表格后,都会触发该事件,在事件处理函数中运用Ajax将修改的数据更新到数据库; 2.建立单独的保存处理函数,提供一个保存按钮,所有编辑完成后,由用户点击触发,一次性将所有编辑改动的数据更新到数据库;
第一步：给EditorGridPanel添加afteredit事件处理代码
 //给EditorGridPanel添加afteredit事件处理代码
 gridPanel.on("afteredit",function(obj){
  
 });

 

第二步：分析obj参数
可以看出,afteredit事件处理函数只有一个参数,是一个对象(Object e),通过这个对象,我们可以得到: 1.grid,即刚才编辑的表格对象 2.record,刚才编辑的记录 3.field,刚才编辑的是哪个字段 4.value,单元格中改动后的值 5.originalValue,单元格中改动前的值 6.row,刚才编辑的单元格在grid中的行索引位置 7.column,刚才编辑的单元格在grid中的列索引位置
 //给EditorGridPanel添加afteredit事件处理代码
 gridPanel.on("afteredit",function(obj){
  alert(obj.record.get("id"));
  alert(obj.field);
  alert(obj.value);
  alert(obj.originalValue);
  alert(obj.row);
  alert(obj.column);
 });

 

第三步：发送异步请求。
//给EditorGridPanel添加afteredit事件处理代码
 gridPanel.on("afteredit",function(obj){
  var id = obj.record.get("id");
  var field = obj.field;
  var value = obj.value;
  //发送异步请求
  Ext.Ajax.request({
   url:"updateUser.action",
   method:"post",
   params:{
    id:id,
    field:field,
    value:value
   },
   success:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("成功",jsonStr.msg);
   },
   failure:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("失败",jsonStr.msg);
   }
  })
 });

 

第四步：Action操作

第五步：完成更新功能
1.修改成功后记录进行提交
   success:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("成功",jsonStr.msg);
    obj.record.commit();
   },

2.修改失败后回滚
   failure:function(result){
    var jsonStr = Ext.util.JSON.decode(result.responseText)
    Ext.MessageBox.alert("失败",jsonStr.msg);
    obj.record.reject();
   }