Ext.onReady(function(){  /* * EditorGridPanel的工作过程 * 1、用户点击单元格 * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态 * 3、离开单元格的编辑状态 * 4、更新编辑后的内容，出现三角号表示已经被修改过 * 5、程序内部变化：将记录设置为脏读数据状态，并将修改后的记录存放在Record类型的数组modified中。 */  //准备数据  var data = [  {id:1,date:new Date(),name:"吕鹏",address:"中华人民共和国",bank:"中国光大银行",isFast:true},  {id:2,date:new Date(),name:"张三",address:"中华人民共和国",bank:"中国农业银行",isFast:false},  {id:3,date:new Date(),name:"李四",address:"中华人民共和国",bank:"中国商业银行",isFast:false},  {id:4,date:new Date(),name:"王五",address:"中华人民共和国",bank:"中国招商银行",isFast:false}  ];  //Proxy  var proxy = new Ext.data.MemoryProxy(data);  //描述数据结构  var Order = Ext.data.Record.create(  [  {name:"ID",type:"int",mapping:"id"},//编号  {name:"DATE",type:"date",mapping:"date"},//日期  {name:"NAME",type:"string",mapping:"name"},//姓名  {name:"ADDRESS",type:"string",mapping:"address"},//地址  {name:"BANK",type:"string",mapping:"bank"},//银行  {name:"ISFAST",type:"boolean",mapping:"isFast"}//银行
        ]  );  //Reader  var reader = new Ext.data.JsonReader({},Order);  //Store  列模型中的dataIndex必须和Human结构中的name属性保持一致  var store = new Ext.data.Store({  proxy:proxy,  reader:reader,  autoLoad:true,  pruneModifiedRecords:true  });  //交易银行  var banks = [  ["中国光大银行","中国光大银行"],  ["中国农业银行","中国农业银行"],  ["中国商业银行","中国商业银行"],  ["中国招商银行","中国招商银行"]  ]  //列模型  var cm = new Ext.grid.ColumnModel([  {header:"订单编号",dataIndex:"ID",width:60,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false}))},  {header:"下单日期",dataIndex:"DATE",width:140,renderer:new Ext.util.Format.dateRenderer("Y-m-d"),editor:new Ext.grid.GridEditor(new Ext.form.DateField({  format:"Y-m-d"  }))},  {header:"收货人姓名",dataIndex:"NAME",width:120,editor:new Ext.grid.GridEditor(new Ext.form.TextField())},  {header:"收货人地址",dataIndex:"ADDRESS",editor:new Ext.grid.GridEditor(new Ext.form.TextField())},  {header:"交易银行",dataIndex:"BANK",width:120,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({  store:new Ext.data.SimpleStore({  fields:["value","text"],  data:banks  }),  displayField:"text",  valueField:"value",  mode:"local",  triggerAction:"all",  readOnly:true,  emptyText:"请选择银行"  }))},  {header:"快递",dataIndex:"ISFAST",width:70,renderer:function(v){return v?"快递":"非快递"},editor:new Ext.grid.GridEditor(new Ext.form.Checkbox())}  ]);  //EditorGridPanel定义  var grid = new Ext.grid.EditorGridPanel({  store:store,  cm:cm,  autoExpandColumn:"ADDRESS",  width:800,  autoHeight:true,  renderTo:"a",  autoEncode:true, //提交时是否自动转码
        tbar:[{  text:"添加一行",  cls:"x-btn-text-icon",  handler:function(){  var initValue = {  ID:"",  DATE:new Date(),  NAME:"",  ADDRESS:"",  BANK:"",  ISFAST:false  };  var order = new Order(initValue);  grid.stopEditing();  grid.getStore().add(order);  //设置脏数据  order.dirty = true;  //只要一个字段值被修改了，该行的所有值都设置为脏读标记  order.modified = initValue;  if(grid.getStore().modified.indexOf(order) == -1){  grid.getStore().modified.push(order);  }  }  },{  text:"删除一行",  cls:"x-btn-text-icon",  handler:function(){  var sm = grid.getSelectionModel();  if(sm.hasSelection()){  Ext.Msg.confirm("提示","真的要删除选中的行吗？",function(btn){  if(btn == "yes"){  var cellIndex = sm.getSelectedCell();//获取被选择的单元格的行和列索引  var record = grid.getStore().getAt(cellIndex[0]);  grid.getStore().remove(record);  }  });  }else{  Ext.Msg.alert("错误","请先选择删除的行，谢谢");  }  }  },"-",{  text:"保存",
//          icon:"",  cls:"x-btn-text-icon",  handler:function(){  var store = grid.getStore();  //得到修改过的Recored的集合  var modified = store.modified.slice(0);  //将数据放到另外一个数组中  var jsonArray = [];  Ext.each(modified,function(m){  //alert(m.data.ADDRESS);//读取当前被修改的记录的地址  //m.data中保存的是当前Recored的所有字段的值json，不包含结构信息
                    jsonArray.push(m.data);  });  var r = checkBlank(modified);  if(!r){  return;  }else{  //通过ajax请求将修改的记录发送到服务器最终影响数据库
                    Ext.Ajax.request({  method:"post",//最好不要用get请求  url:"../../../editGridServlet",  success:function(response,config){  var json = Ext.util.JSON.decode(response.responseText);  //grid.getStore().reload();  Ext.Msg.alert("提交成功",json.msg);  },  params:{data:Ext.util.JSON.encode(jsonArray)}  });  }  }  }]  });  //删除一行时，同步数据库  grid.getStore().on("remove",function(s,record,index){  var jsonArray = [record,data];//因为servlet只处理数组，所以先变成数组  if(record.data.ID != ""){  Ext.Ajax.request({  method:"post",  url:"../../../editGridServlet",  params:{data:Ext.util.JSON.encode(jsonArray),action:"delete"},  success:function(response,config){  var msg = Ext.util.JSON.decode(response.responseText);  //grid.getStore().reload();  Ext.Msg.alert("",msg.msg);  }  });  }  });  //验证是否输入的数据是有效的  var checkBlank = function(modified/*所有编辑过的和新增加的Record*/){  var result = true;  Ext.each(modified,function(record){  var keys = record.fields.keys;//获取Record的所有名称  Ext.each(keys,function(name){  //根据名称获取相应的值  var value = record.data[name];  //找出指定名称所在的列索引  var colIndex = cm.findColumnIndex(name);  //var rowIndex = grid.getStore().indexOfId(record.id);  //根据行列索引找出组件编辑器  var editor = cm.getCellEditor(colIndex).field;  //验证是否合法  var r = editor.validateValue(value);  if(!r){  Ext.MessageBox.alert("验证","对不起，您输入的数据非法");  result = false;  return;  }  });  });  return result;  }
});