EditGridPanel

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