- 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;
- }
- });